armollica/.block

## .block
height: 960

## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>