slinky

<!DOCTYPE html>
<meta charset="utf-8">

path{
	stroke: white;
	stroke-width: 4px;
	fill: none;
}

</style>

var svg = d3.select('body')
	.append('svg')
		.attr({height: height, width: width})
	.append('g')
		.translate([width/2, height/2])

svg.append('path')

var circlePoints = d3.range(0, Math.PI*2 + 1, Math.PI*2/n)
	.map(function(θ){
		var rv = [Math.cos(θ)*outerR, Math.sin(θ)*outerR]
		rv.θ = θ
		return rv 
	})

var pathA = circlePoints.map(function(d){
	var θ = d.θ*16
	return [d[0]*Math.cos(θ)*innerR, d[1]*Math.sin(θ)*innerR]
})

d3.timer(function(t){
	var periods = Math.sin(t/1000)*3
	var pathA = circlePoints.map(function(d){
		var θ = d.θ*periods
		return [d[0]*Math.cos(θ)*innerR, d[1]*Math.sin(θ)*innerR]
	})

svg.select('path').attr('d', pointsToPath(pathA))

})

function pointsToPath(array){
	return 'M' + array.join('L')
}

</script>