All examples By author By category About

rhysforyou

SVG heat shimmer

Heat shimmer that's low resolution due to the reuse of the thumbnail.png file itself (it would work just as well with larger images).

Some other controversial shortening steps have been taken, for example, not wrapping the <filter> into <defs> as the spec says a filter doesn't render on its own; no explicit use of filter inputs / results (it's implied); the use of setTimeout instead of requestAnimationFrame; repeatedly querying the DOM element inside the loop. SMIL wasn't used as it's deprecated.

SVG filters are incredibly versatile; their main problem is slowness (especially in Safari). The visuals can be quite browser-dependent too. Probably a WebGL reimplementation of SVG would be faster than SVG itself.

Built with blockbuilder.org