[New experiments being posted at @monfera for example a pure SVG map with hill shading and multilevel contour lines.]

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).

(See a generative topo map + palette + bump lighting SVG example here.)

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