circle-braid

Remake of http://beesandbombs.tumblr.com/post/118139231509/from-the-archive

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

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

</style>

var width = 960,
		height = 500,
		outerR = 200,
		periods = 8,
		n = 180

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

svg.append('path')
svg.append('path')

var ticks = d3.range(0, Math.PI*2 + 1/n, Math.PI*2/n)
var pathA = []
var pathB = []

d3.timer(function(t){
	ticks.forEach(function(θ, i){
		//magnitute of distance from circle is a triangle wave
		var mag = Math.abs((n - i + t/30) % n - n/2)/n
		//set offsets on half of circle to 0
		mag = Math.max(0, mag - 1/4)*120

var rA = outerR + Math.sin(θ*periods)*mag
		pathA[i] = [Math.cos(θ)*rA, Math.sin(θ)*rA]

var rB = outerR - Math.sin(θ*periods)*mag
		pathB[i] = [Math.cos(θ)*rB, Math.sin(θ)*rB]
	})

svg.selectAll('path').data([pathA, pathB]).attr('d', pointsToPath)
})

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

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js