Rounded Arc Test by mbostock

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="d3.min.js"></script>
<script>

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

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

var width = canvas.width,
    height = canvas.height,
    outerRadius = height / 2 - 30,
    innerRadius = outerRadius / 3;

var arc = d3_shape.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .context(context);

var pie = d3_shape.pie()
    .padAngle(0.03);

var ease = d3_ease.cubicInOut,
    duration = 2500;

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

  context.save();
  context.clearRect(0, 0, width, height);
  context.translate(width / 2, height / 2);

  context.beginPath();
  arcs.forEach(arc.cornerRadius(0));
  context.lineWidth = 1;
  context.strokeStyle = "#777";
  context.stroke();

  context.beginPath();
  arcs.forEach(arc.cornerRadius((outerRadius - innerRadius) / 2 * t));
  context.fillStyle = "#ccc";
  context.fill();
  context.lineWidth = 1.5;
  context.lineJoin = "round";
  context.strokeStyle = "#000";
  context.stroke();

  context.restore();
});

</script>