Old school D3 from simpler times

All examples By author By category About

GitNoise

Full window Github gist

animated distortion

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <svg>
    <defs>
      <filter id="turbuMap1">
        <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="2" result="turbulence" data-filterId="3"/>
        <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence" scale="40"/>
      </filter>
      
      <filter id="turbuMap2">
        <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="2" result="turbulence" data-filterId="3"/>
        <feDisplacementMap yChannelSelector="G" in="SourceGraphic" in2="turbulence" scale="40"/>
      </filter>
    </defs>

</svg>
  <script>

// Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("svg")
    .attr("width", 960)
    .attr("height", 500)
      
    svg.append("g").append("image")
      .attr("xlink:href", "https://placekitten.com/200/200?image=10")
      .attr("x", 100)
      .attr("y", 100)
      .attr("width", 200)
      .attr("height", 200)
      .attr("filter", "url(#turbuMap1)")

function switcher(i) {
      console.log(i) 
    	if (i%2===0) d3.select("image").attr("filter", "url(#turbuMap2)");
    	if (i%2===1) d3.select("image").attr("filter", "url(#turbuMap1)");
      if (i<10) init(i+1);
    }  
    
    function init(i) {
      setTimeout(function() { switcher(i) }, 400);
    } 
    
    init(0);

</script>
</body>

https://d3js.org/d3.v4.min.js