Skip to content

Instantly share code, notes, and snippets.

@monfera
Last active March 5, 2018 10:37
Show Gist options
  • Save monfera/19845caf6aa383abddaa248a3f0d2ae0 to your computer and use it in GitHub Desktop.
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

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