Skip to content

Instantly share code, notes, and snippets.

@namuol
Forked from monfera/.block
Last active September 6, 2016 06:32
Show Gist options
  • Save namuol/d7d8ad9ee76772f9429da407cc533a22 to your computer and use it in GitHub Desktop.
Save namuol/d7d8ad9ee76772f9429da407cc533a22 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())
}, 33)
</script>
</svg>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment