rect-blinds

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

</style>

var w = 30,
		bw = 10
		width  = window.innerWidth
		height = window.innerHeight

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

function drawLines(){
	var curX = 0,
			lines = []

while(curX < width){
		var curWidth = Math.random()*w + bw

lines.push({width: curWidth + 1, x: curX})
		curX += curWidth
	}

var rects = svg.append('g').dataAppend(lines, 'rect')
			.attr('x', function(d){ return d.x + (1-Math.random())*200 })
			.attr('height', height)
			.attr('width', 0)
			.attr('fill', randColor())

rects
		.transition()
			// .ease('elastic')
			.delay(function(d, i){ return (bw + w - d.width)*100 })
			.duration(function(d, i){ return 5000 + (d.width - bw - w)*100 })
			.attr('width', ƒ('width'))

rects.transition('x')
			.ease('linear')
			.duration(function(d, i){ return 4000 + (d.width - bw - w)*100 })
			.attr('x', ƒ('x'))

setTimeout(drawLines, 6000)
}
drawLines()

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

</script>