monfera/.block

## .block
license: mit
border: no
height: 420

## README.md

      
    Raw
  

              README.md
            
          
    [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

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>