Oh hey =D<p>The ring's source code in particular had to be transcribed from an actual shader I made (<a href="https://www.shadertoy.com/view/msd3R2" rel="nofollow noreferrer">https://www.shadertoy.com/view/msd3R2</a>). I didn't have the patience to write it directly in CSS. It's neither the right semantic nor the medium for it (which does make you wonder what CSS' medium was supposed to be).<p>Out of curiosity, I've transcribed that ring, which runs at <1 fps with pure CSS, into a JS version with requestionAnimationFrame + setting the background color (<a href="https://github.com/chenglou/pure-css-shaders-art/blob/master/ringjs.html">https://github.com/chenglou/pure-css-shaders-art/blob/master...</a>).<p>Perhaps unsurprisingly, it runs at full 120fps on a decent laptop (it's just 21*21 JS style setting really). I've tried to make a half-JS, half-CSS version, and the speed is somewhere in-between. Basically, CSS variables are _extremely_ slow across all browsers, and I don't believe I've hit some particular edge-case. They're not used idiomatically here, but still, we shouldn't hit this drastic of slowdowns when updating 441 styles. They're also pretty hard to read the moment the calculation isn't some trivial basic arithmetics; and even then...<p>The true shader version runs at basically infinite fps =)
Here are some demos as shown in the repository:<p>- Heart: <a href="https://chenglou.me/pure-css-shaders-art/heart.svg" rel="nofollow noreferrer">https://chenglou.me/pure-css-shaders-art/heart.svg</a><p>- Ring (kinda laggy): <a href="https://chenglou.me/pure-css-shaders-art/ring.html" rel="nofollow noreferrer">https://chenglou.me/pure-css-shaders-art/ring.html</a><p>- Squircles (as per Apple patent D670,286): <a href="https://chenglou.me/pure-css-shaders-art/squircle.html" rel="nofollow noreferrer">https://chenglou.me/pure-css-shaders-art/squircle.html</a>