[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="//www.w3.org/2000/svg"
xmlns:xlink="//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>