Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/index.html

Last active August 21, 2016 06:22
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/ee3c45e8bcde0a2c9712 to your computer and use it in GitHub Desktop.
Save 1wheel/ee3c45e8bcde0a2c9712 to your computer and use it in GitHub Desktop.
Download ZIP
rect-blinds
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
background-color: rgb(38, 38, 38);
margin: 0px;
}
</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 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment