mbostock/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #000;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var δτ = 0.003,
    ρ = 28,
    σ = 10,
    β = 8 / 3,
    x = .5,
    y = .5,
    z = 10,
    n = 30;

var width = 960,
    height = 500;

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

var color = d3.scale.linear()
    .domain([0, 20, 30, 50])
    .range(["yellow", "orange", "brown", "purple"])
    .interpolate(d3.interpolateHcl);

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

context.lineWidth = .2;
context.fillStyle = "rgba(0,0,0,.03)";

d3.timer(function() {
  context.save();
  context.globalCompositeOperation = "lighter";
  context.translate(width / 2, height / 2);
  context.scale(12, 14);
  context.rotate(30);
  for (var i = 0; i < n; ++i) {
    context.strokeStyle = color(z);
    context.beginPath();
    context.moveTo(x, y);
    x += δτ * σ * (y - x);
    y += δτ * (x * (ρ - z) - y);
    z += δτ * (x * y - β * z);
    context.lineTo(x, y);
    context.stroke();
  }
  context.restore();
});

setInterval(function() {
  context.fillRect(0, 0, width, height);
}, 100);

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background: #000;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var δτ = 0.003,
	ρ = 28,
	σ = 10,
	β = 8 / 3,
	x = .5,
	y = .5,
	z = 10,
	n = 30;

	var width = 960,
	height = 500;

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

	var color = d3.scale.linear()
	.domain([0, 20, 30, 50])
	.range(["yellow", "orange", "brown", "purple"])
	.interpolate(d3.interpolateHcl);

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

	context.lineWidth = .2;
	context.fillStyle = "rgba(0,0,0,.03)";

	d3.timer(function() {
	context.save();
	context.globalCompositeOperation = "lighter";
	context.translate(width / 2, height / 2);
	context.scale(12, 14);
	context.rotate(30);
	for (var i = 0; i < n; ++i) {
	context.strokeStyle = color(z);
	context.beginPath();
	context.moveTo(x, y);
	x += δτ * σ * (y - x);
	y += δτ * (x * (ρ - z) - y);
	z += δτ * (x * y - β * z);
	context.lineTo(x, y);
	context.stroke();
	}
	context.restore();
	});

	setInterval(function() {
	context.fillRect(0, 0, width, height);
	}, 100);

	</script>