zikes/index.html

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

body {
  width: 900px;
  padding-top:25px;
  margin:auto;
  background:#333;
}
path {
  fill: #eee;
}

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

var width = 900,
    height = 900,
    radius = Math.min(width, height) / 2;

var arcs = [];

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

for(var i = 0; i < width/10/2; i++) {
  arcs[i] = d3.svg.arc()
              .innerRadius(radius-(10*i))
              .outerRadius(radius-(10*i)-5)
              .startAngle(-.25*2*Math.PI)
              .endAngle(-.25*2*Math.PI);

  svg.append("path").datum(i)
    .attr("d", arcs[i])

}

function selectArcs() {
      d3.selectAll("path")
          .each(arcTween);
}

function arcTween(i){
  var self=this,
      duration=1500,
      delay=100;
  setInterval(function(){
    d3.select(self)
        .transition().delay(delay*i).duration(duration)
        .attrTween("d", tweenArcBack)
        .transition().duration(duration)
        .attrTween("d", tweenArc);
  },2*duration);
}

function tweenArc(b) {
  var i = d3.interpolate(.25*2*Math.PI, -.25*2*Math.PI);
  return function(t) {
    return arcs[b].endAngle(i(t))();
  };
}
function tweenArcBack(b) {
  var i = d3.interpolate(-.25*2*Math.PI, .25*2*Math.PI);
  return function(t) {
    return arcs[b].endAngle(i(t))();
  };

}

selectArcs();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<style>

	body {
	width: 900px;
	padding-top:25px;
	margin:auto;
	background:#333;
	}
	path {
	fill: #eee;
	}

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

	var width = 900,
	height = 900,
	radius = Math.min(width, height) / 2;

	var arcs = [];

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

	for(var i = 0; i < width/10/2; i++) {
	arcs[i] = d3.svg.arc()
	.innerRadius(radius-(10*i))
	.outerRadius(radius-(10*i)-5)
	.startAngle(-.252Math.PI)
	.endAngle(-.252Math.PI);

	svg.append("path").datum(i)
	.attr("d", arcs[i])

	}

	function selectArcs() {
	d3.selectAll("path")
	.each(arcTween);
	}

	function arcTween(i){
	var self=this,
	duration=1500,
	delay=100;
	setInterval(function(){
	d3.select(self)
	.transition().delay(delay*i).duration(duration)
	.attrTween("d", tweenArcBack)
	.transition().duration(duration)
	.attrTween("d", tweenArc);
	},2*duration);
	}

	function tweenArc(b) {
	var i = d3.interpolate(.252Math.PI, -.252Math.PI);
	return function(t) {
	return arcs[b].endAngle(i(t))();
	};
	}
	function tweenArcBack(b) {
	var i = d3.interpolate(-.252Math.PI, .252Math.PI);
	return function(t) {
	return arcs[b].endAngle(i(t))();
	};

	}

	selectArcs();
	</script>
	</body>
	</html>