The Ritualiser was a very old experiment in SVG masks I did back in 2012 as I was trying to find an interesting way of using the hundreds of photographs I’d taken when I first moved to Berlin. Written in jQuery.
To commemorate the launch of Pokémon Go in 2016 and to test out some interesting web technologies I built Illuminachu, an animated version of an illustration by Jim Cooke.
If you’re using a browser that supports the v0 Shadow DOM implementation then the main figure is written entirely into it, else it defaults to the standard DOM. I wanted to see how much I could hide in there. As it turns out it’s quite a lot. The background is actually an oversized pseudo ::before element which is constrained by its parent body tag and animated with CSS3.
The face tracking is done with the value of the cursor’s position minus half of the height and width of the screen to reset the 0, 0 point to the exact middle of the screen. Again, the actual positioning of the face is done with CSS3. To offset the CPU load the transformations are pushed to the GPU if available. The face itself is entirely made from three SVGs, a parent div element which composes the body with SVG mask and the ::before and ::after pseudo elements make up the cheeks and features. If you’re viewing it in Chrome then the cheeks will stay inside the body, sadly not so much in other browsers as they (still) don’t support masking. All the JS is vanilla and the page size with assets and all code without server-side compression is around 17kb.
This is the first in a series of experiments in animation using as few elements as possible. Again Chrome is the only platform that this will work on due to SVG masking limitations. You think I’d learn but I love the possibilities… What you see in the markup is nothing but an empty body tag but when rendered there are multiple layers of moving objects, in this case a body tag with both the ::before and ::after pseudo elements. It could potentially be more with careful planning.
All animations are handled via requestAnimationFrame to reduce CPU load and battery drain.
What you’ll get in browsers other than Chrome is a brown screen which inexplicably drains your phone battery or slows your computer down.
All the JS is vanilla and all code without server-side compression is approximately 3kb.