Visual Snow by pstuffa

index.html

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

<body>


  <script>
    
    var margin = {top: 0, right: 0, bottom: 0, left: 0},
        width = window.innerWidth - margin.left - margin.right,
        height = window.innerHeight - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		
     svg.append("rect")
    	.attr("width", width/2)
      .attr("height", height)
    	.style("fill","#000");
    
    
    svg.append("rect")
    	.style("filter", "url(#spect)")
    	.attr("width", width/2.2)
      .attr("height", height)
    	.style("fill","none")
    	.style("opacity", .5);
    
   
    svg.append("rect")
    	.style("filter", "url(#spect)")
    	.attr("width", width)
      .attr("height", height)
    	.style("fill","none")
    	.style("opacity", .5);
    
    
    var defs = svg.append("defs");

    var filter = defs.append("filter").attr("id","spect");

    var turbulence = filter.append("feTurbulence")
        .attr("baseFrequency",1)
        .attr("numOctaves",1)
        .attr("seed", 1);
    
    var i = 1;
    d3.interval(function() {
      i++;
    	turbulence.transition()
      	.attr("seed",i)
    }, 100)

  </script>
</body>