Skip to content

Instantly share code, notes, and snippets.

@monfera
Last active January 26, 2026 17:41
Show Gist options
  • Select an option

  • Save monfera/19845caf6aa383abddaa248a3f0d2ae0 to your computer and use it in GitHub Desktop.

Select an option

Save monfera/19845caf6aa383abddaa248a3f0d2ae0 to your computer and use it in GitHub Desktop.
SVG heat shimmer
license: mit
border: no
height: 420

[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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG filter shimmer</title>
</head>
<body>
<svg width="230" height="120"
style="transform: translate(335px, 120px) scale(4)"
version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="heat">
<feTurbulence id="turb" baseFrequency="0.2" type="turbulence" />
<feDisplacementMap scale="1" in="SourceGraphic" />
</filter>
<image style="filter: url(#heat)" width="100%" height="100%"
xlink:href="thumbnail.png" />
<script>
window.setInterval(function () {
document.getElementById('turb').setAttribute('seed', 500 * Math.random())
}, 100)
</script>
</svg>
</body>
@vjandrea
Copy link
Copy Markdown

vjandrea commented Sep 6, 2016

Looks good in Chrome on Windows, but only as random moving dots in Firefox 48 on Windows. Will try other browers/platforms later.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment