Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/index.html

Last active August 21, 2016 06:23
Show Gist options
  • Save 1wheel/747b57d4d324c440c3f1 to your computer and use it in GitHub Desktop.
Save 1wheel/747b57d4d324c440c3f1 to your computer and use it in GitHub Desktop.
Download ZIP
rect-wave
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
background-color: rgb(38, 38, 38);
margin: 0px;
}
svg{
overflow: visible;
}
</style>
<body></body>
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
<script>
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment