Image XOR in SVG.

animated.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="640" height="360">
    <defs>
        <clipPath id="carten-clip">
            <use href="#carten" />
        </clipPath>
    </defs>
    
    <rect width="16" height="9" fill="#eef" />

    <text id="good" font-size="5" x="8" y="5" text-anchor="middle" font-wieght="thin">GOOD</text>
    <text font-size="3" x="8" y="7" text-anchor="middle" font-weight="bold">MORNING</text>

    <rect id="carten" x="-16" y="-9" width="48" height="18" fill="#104" />

    <use href="#good" fill="white" clip-path="url(#carten-clip)" />

    <text font-size="3.5" x="8" y="7.3" text-anchor="middle" font-weight="bold" fill="white" clip-path="url(#carten-clip)">NIGHT</text>

    <style>
        #carten {
            animation: carten 4s linear infinite;
            transform-origin: bottom center;
        }
        @keyframes carten {
            from { transform: rotate(0); }
              to { transform: rotate(360deg); }
        }
    </style>
</svg>

xor.svg