Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/index.html

Last active August 21, 2016 06:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 1wheel/9b14d51873461913e2ec to your computer and use it in GitHub Desktop.
Save 1wheel/9b14d51873461913e2ec to your computer and use it in GitHub Desktop.
Download ZIP
rect-spiral
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) % 2) return
squares.push({x: x, y: y, i: i, j: j,
isLeft: Math.random() < .5,
isTop: Math.random() < .5})
})
})
svg.append('g').dataAppend(squares, 'rect')
.attr('x', function(d){ return d.isLeft ? d.x : d.x + s })
.attr('y', function(d){ return d.isTop ? d.y : d.y + s })
.attr({width: 0, height: 0})
.style('fill', randColor())
.transition()
// .ease('bounce')
.duration(1000)
.delay(function(d, i){
return d.isTop*1000 + d.isLeft*1000 + (d.isLeft && !d.isTop)*1000*2 })
.attr({width: s, height: s})
.attr({x: ƒ('x'), y: ƒ('y')})
setTimeout(drawSquares, 5/4*1000)
}
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