layered voronoi relaxation

<!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;
    }
    svg { background: white; }
    .layer { fill: none; }
  </style>
</head>

<body>
  <script>
  (function() {
    var options = {
      width: 500,
      height: 500,
      points: 30,
      density: .5,
      iterations: 300,
      opacity: .1,
      colorScale: d3.interpolateRgb('black', 'black')
    };
    
    var points = [];
    var width = options.width, height = options.height;
    var count = options.points;
    while(count-- > 0) {
      points.push([
        Math.random() * width,
        Math.random() * height
      ]);
    };
    var layers = [points];
    var voronoi = d3.voronoi().size([width, height]);
    var iterations = options.iterations;
    while(iterations-- > 0) {
      points = voronoi.polygons(points).map(function(poly) {
        return d3.polygonCentroid(poly);
      });
      layers.push(points);
    }
    
    var scale = d3.scaleSequential(options.colorScale).domain([0, options.relaxations]);
    
    var $svg = d3.select('body').append('svg')
    	.attr('width', options.width)
      .attr('height',options.height);
    
    $svg.selectAll('.layer')
    	.data(layers)
    	.enter()
        .append('path')
        .attr('class', 'layer')
	      .attr('stroke', function(l, i) {
      		var color = d3.rgb(scale(i));
      		color.opacity = options.opacity;
      		return color;
		    })
    		.attr('d', function(points) {
      		return voronoi.polygons(points).map(function(p) {
            return 'M' + p.map(function(p) {
              return p.join(',');
            }).join('L') + 'Z';
          }).join('');
		    });
  }());

</script>
</body>

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