Blurry Blots

<!DOCTYPE html>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var numRows = 10,
    numCols = 10,
    numBlobs = numRows * numCols,
    width = 960,
    height = 960,
    blobWidth = Math.max(width / numCols, height / numRows);

var random = d3.randomUniform(-blobWidth / 2, blobWidth / 2);

var canvas = d3.select("body").append("canvas")
  .attr("width", width)
  .attr("height", height);

var context = canvas.node().getContext("2d");

var line = d3.line()
  .x(function(d) { return d[0]; })
  .y(function(d) { return d[1]; })
  .curve(d3.curveCatmullRomClosed.alpha(0.5))
  .context(context);

var blobs = d3.range(numBlobs)
  .map(function(i) {
    var cx = width * Math.floor(i / numRows) / numCols + blobWidth / 2,
        cy = height * (i % numRows) / numRows + blobWidth / 2;
    var blob = createBlob(randomInteger(3, 7));
    return {
      cx: cx,
      cy: cy,
      t: 0,
      dt: (Math.random() - 0.5) * 0.04 + 0.0001,
      blob: blob
    };
  });

var timer = d3.timer(render);

function render(elapsed) {
  blobs.forEach(function(d) {
    context.save()
    context.translate(d.cx, d.cy);
    context.rotate(d.t += d.dt);
    context.globalAlpha = 0.01;
    context.beginPath();
    line(d.blob);
    context.strokeStyle = "#000";
    context.stroke();
    context.restore();
  });
  if (elapsed > 5000) timer.stop();
}

function createBlob(n) {
  var randomPoints = d3.range(n)
    .map(function(d) { return [random(), random()]; });
  return d3.polygonHull(randomPoints);
}

function randomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

</script>
</body>
</html>

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