Skip to content

Instantly share code, notes, and snippets.

@rhysforyou
Forked from monfera/.block
Last active September 6, 2016 05:43
Show Gist options
  • Save rhysforyou/597eb4b7819455c4b89deecc9a074947 to your computer and use it in GitHub Desktop.
Save rhysforyou/597eb4b7819455c4b89deecc9a074947 to your computer and use it in GitHub Desktop.
SVG heat shimmer
license: mit
border: no
height: 420

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

<!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())
}, 1000/60)
</script>
</svg>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment