23-11

Finally somewhat happy with the chromatic aberration effect.
At first I was happy with the full effect over the homepage as well as inside __frgmnt. But then I asked myself if I couldn’t use a mask to increase the effect overall while keeping the center of the screen readable.

So I started to do some research and didn’t find much useful stuff. Some sources pointed out that masks can be put inside SVGs, which is what I already use as a filter for the effect. Easy: make a PNG and put it inside the SVG!
But no, the external SVG couldn’t load the mask PNG for whatever reason. So I had to write the SVG inline, which I really do not like :D

But whatever, let’s try this and… YES, it worked and it looks awesome! But what is that? Why is my radiator spinning up? OH! Casual 70% CPU usage from visiting a website… Wait, let me check my phone… Hm yes, the GIFs seem kinda laggy. OH, already lost 3% battery life. Damn.

Yeah, that wasn’t feasible. So first I improved the CRT and flicker animations. The flicker is now just a simple GIF playing over the entire screen so it doesn’t compete over draw calls with the CRT animation. The CRT animation was changed to use absolute values and not to interpolate its position. This way, draw calls can be controlled.

animation: scanline-scroll 1s steps(4, end) infinite;
@keyframes scanline-scroll {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 4px, 0 0;
  }
}

But of course things can’t be that easy. Now the GIFs play at the framerate of the animation, since they don’t cause their own draw calls anymore when you’re using a filter on an upper layer. Well, restructuring again it is.

At least then I found out that I can simply use CSS’s own mask. I actually didn’t know that this existed! After putting the SVG and mask on their own layer so as not to overwrite the other effects such as CRT and flicker, it was done: the complete chromatic aberration effect I wished for, without a massive performance cost.

So what did we learn?
Don’t use masks inside SVGs if the SVGs are used as a fullscreen filter that causes updates every frame because of an animation inside the same element x)