rect-wave

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

svg{
	overflow: visible;
}

</style>

var offset = 0,
		width  = window.innerWidth,
		height = window.innerHeight,
		s = Math.sqrt(width*height/200)

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

function drawSquares(){
	offset++

var squares = []
	d3.range(0, width + s, s).forEach(function(x, i){
		d3.range(0, height + s, s).forEach(function(y, j){
			if ((i + j + offset) % 3) return
			squares.push({x: x, y: y, i: i, j: j})
		})
	})

svg.append('g').dataAppend(squares, 'rect')
			.attr({x: ƒ('x'), y: ƒ('y')})
			.attr({width: 0, height: 0})
			.style('fill', randColor())
		.transition()
			.duration(1500)
			.delay(function(d, i){ return (d.i + d.j + Math.random()*0)*90 })
			.attr({width: s, height: s})

setTimeout(drawSquares, 900)
}
drawSquares()

function randColor(){
	return 'rgb(' + [Math.random()*255, Math.random()*255, Math.random()*255].map(Math.round) + ')'
}

</script>