squares-around-circles

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

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

circle{
	fill: white;
}

</style>

var s = 20,
		l = s/2
		width  = 960 - 0*2
		height = 500 - 0*2

//offset from center for each num
var x1 = [ l,  l, -l, -l]
var y1 = [-l,  l,  l, -l]
var x2 = [ l, -l, -l,  l]
var y2 = [ l,  l, -l, -l]

var x1 = [ l,  l, -l,  l]
var y1 = [-l,  l, -l, -l]
var x2 = [ l, -l, -l, -l]
var y2 = [ l,  l,  l, -l]

var svg = d3.select('body')
	.append('svg')
		.attr({height: height + 0*2, width: width + 0*2})

var grid = []
d3.range(0, width + s, s*6).map(function(x, i){
	d3.range(0, height + s, s*3).map(function(y, j){
		d3.range(0, 4).map(function(sideNum){
			grid.push({
				x: 	x + (j % 2)*s*3,
				y: 	y,
				n: 	sideNum
			})
		})
	})
})

svg.dataAppend(grid, 'circle')
		.attr('r', 3)
		.attr('cx', ƒ('x'))
		.attr('cy', ƒ('y'))

var lines = svg.dataAppend(grid, 'path')
		.attr('d', pointToPath)

function cycleAnimation(){
	grid.forEach(pushLinesOut)
	lines
		.transition().delay(500).duration(1500)
			.attr('d', pointToPath)

// lines.attr('d', pointToPathReverse)
	// grid.forEach(rotateLines)
	// lines
	// 	.transition().delay(2500).duration(1500)
	// 		.attr('d', pointToPathReverse)

setTimeout(cycleAnimation, 4000)
}
cycleAnimation()

function pushLinesOut(d){
	if (d.n % 2){
		d.y += d.n == 1 ? 3*s : -3*s
	} else{
		d.x += d.n == 0 ? 3*s : -3*s
	}

d.n = (d.n + 2) % 4
}

function rotateLines(d){
	d.n = (d.n - 1 + 4) % 4
}

function pointToPath(d){
	return 'M' + [d.x + x1[d.n], d.y + y1[d.n]] +
				 'L' + [d.x + x2[d.n], d.y + y2[d.n]] + 'Z'
}

function pointToPathReverse(d){
	return 'M' + [d.x + x2[d.n], d.y + y2[d.n]] +
				 'L' + [d.x + x1[d.n], d.y + y1[d.n]]
}

</script>