D3 Examples - perlin noise, animated lines, and SVG filters

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<style>
html, body {
  background: #f0f0f0;
  padding: 0;
}
​
svg {
  background: #FFF;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="perlin.js"></script>
<script>
var svg = d3.select('svg'),
    width = +svg.attr('width'),
    height = +svg.attr('height');
​
var noise = window.noise;
​
/******************************************************************************
 * Colors
 */
​
var colors = [
  '#ecd078',
  '#d95b43',
  '#c02942',
  '#542437',
  '#53777a'
];
​
/******************************************************************************
 * Gooey Filter
 * Source: https://bl.ocks.org/nbremer/3da658e9a21cd3c71d0819f9698f3bfa
 */
​
var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooeyCodeFilter');
      filter.append('feGaussianBlur')
        .attr('in','SourceGraphic')
        .attr('stdDeviation','3')
        //to fix safari: https://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image
        .attr('color-interpolation-filters','sRGB')
        .attr('result','blur');
      filter.append('feColorMatrix')
        .attr('in','blur')
        .attr('mode','matrix')
        .attr('values','1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9')
        .attr('result','gooey');
​
/******************************************************************************
 * Vars
 */
​
var DURATION = 5000;
​
var dt = Math.random(),
    tInit = performance.now();
​
/******************************************************************************
 * Paths
 */
​
var paths = [];
for (var i = 0; i < 10; i++) {
  var path = [];
  path.color = colors[i % colors.length];
​
  for (var j = 0; j <= 10; j++) {
    path.push( {x: j / 10, y: Math.random(), dt: dt} );
  }
  paths.push(path);
}
​
/******************************************************************************
 * Render
 */
​
var plot = function (d) {
  var tOffset = Math.sin(2 * Math.PI * dt + d.x);
  return 0.5 * height * (noise.simplex3(d.x, d.y, tOffset) + 1);
};
​
var lineFunction = d3.line()
    .x((d) => d.x * width)
    .y((d) => plot(d))
    .curve(d3.curveCatmullRom.alpha(0.5));
​
var pathSel = svg.append('g')
    .style('filter', 'url(#gooeyCodeFilter)')
  .selectAll('path').data(paths);
pathSel.enter().append('path')
  .attr('d', lineFunction)
  .attr('stroke', (d) => d.color)
  .attr('stroke-width', 5)
  .attr('fill', 'none');
​
/******************************************************************************
 * Animation
 */
​
requestAnimationFrame(animate);
​
function animate () {
  requestAnimationFrame(animate);
​
  dt = (performance.now() - tInit) % DURATION / DURATION;
​
  svg.selectAll('path').attr('d', lineFunction);
}
​
</script>
​
    