Why is this a big deal?
Animations for the web are generally expensive, from a hosting and SEO standpoint. Each animation file (AVIF, WEBP, GIF, MP4) are fairly large. The more elaborate the animation, the larger the file. Additionally, each animation requires a separate download - which slows your page loads down. I spend/spent a lot of time compressing the animations used on this website to be under 1MB - most are under 500KB.
This is not a video. This is not an image. This is an instruction.
This method is totally and completely different - solving BOTH expenses with a single technology, WebGL. Modern browsers are capable of rendering a lot of things that most websites don't take advantage of. Believe it or not, your browser is quite capable of rendering 3D scenes - at the cost of some CPU/GPU cycles.
The Animation Source
The animation is a shader, in this case created by a Twitter user who calls himself XorDev. His code is: vec2 p=(round(FC.xy)-.5*r)/r.y,v;for(float i;i++<20.;o+=vec4(fwidth(v=ceil(p)).xyy,fract(length(v)/i-t*.2))*(1.-o.a))p+=p;, and it's interpreted by the browser, and rendered into what you see above.
Because the rendering engine is built into the browser, a little JavaScript (5.8KB) allows us to render an animation by passing only the instructions to the rendering engine. Many of the videos I used for my animations were created this way - but the resulting animation file is orders of magnitude larger than the instructions given to the rendering engine which created it. The animation above would easily be several megabytes in size, I might be able to get it down to several hundred kilobytes with shenanigans - but I'd never be able to get it compressed to the size of the instruction - which is only 110 Bytes, a 99.98% savings in transfer while simultaneously reducing the latency of the page by eliminating a request (for each replaced animation).
