mbostock · February 9, 2016 01:52
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 .paths--straight {
  fill: none;
  stroke: #777;
 }

 .paths--round {
  fill: #ccc;
  stroke: #000;
  stroke-width: 1.5px;
  stroke-linejoin: round;
 }

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

 var data = [1, 1, 2, 3, 5, 8, 13, 21];

 var width = 960,
    height = 500,
    outerRadius = height / 2 - 30,
    cornerRadius = 20;

 var pie = d3.layout.pie();

 var arc = d3.svg.arc()
    .outerRadius(outerRadius);

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

 var straightPath = svg.append("g")
    .attr("class", "paths--straight")
  .selectAll("path")
    .data(data)
  .enter().append("path");

 var roundPath = svg.append("g")
    .attr("class", "paths--round")
  .selectAll("path")
    .data(data)
  .enter().append("path");

 var ease = d3.ease("cubic-in-out"),
    duration = 2500;

 d3.timer(function(elapsed) {
  var t = ease(1 - Math.abs((elapsed % duration) / duration - .5) * 2),
      arcs = pie.padAngle(t * .1)(data);

  arc.innerRadius(outerRadius / (3 - t));
  straightPath.data(arcs).attr("d", arc.cornerRadius(0));
  roundPath.data(arcs).attr("d", arc.cornerRadius(cornerRadius));
 });

 </script>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.paths--straight {
	fill: none;
	stroke: #777;
	}

	.paths--round {
	fill: #ccc;
	stroke: #000;
	stroke-width: 1.5px;
	stroke-linejoin: round;
	}

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

	var data = [1, 1, 2, 3, 5, 8, 13, 21];

	var width = 960,
	height = 500,
	outerRadius = height / 2 - 30,
	cornerRadius = 20;

	var pie = d3.layout.pie();

	var arc = d3.svg.arc()
	.outerRadius(outerRadius);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var straightPath = svg.append("g")
	.attr("class", "paths--straight")
	.selectAll("path")
	.data(data)
	.enter().append("path");

	var roundPath = svg.append("g")
	.attr("class", "paths--round")
	.selectAll("path")
	.data(data)
	.enter().append("path");

	var ease = d3.ease("cubic-in-out"),
	duration = 2500;

	d3.timer(function(elapsed) {
	var t = ease(1 - Math.abs((elapsed % duration) / duration - .5) * 2),
	arcs = pie.padAngle(t * .1)(data);

	arc.innerRadius(outerRadius / (3 - t));
	straightPath.data(arcs).attr("d", arc.cornerRadius(0));
	roundPath.data(arcs).attr("d", arc.cornerRadius(cornerRadius));
	});

	</script>