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/5217aaa0bd90e79e3837 to your computer and use it in GitHub Desktop.
Save 1wheel/5217aaa0bd90e79e3837 to your computer and use it in GitHub Desktop.
Download ZIP
slinky
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
background-color: rgb(41, 18, 4);
}
path{
stroke: white;
stroke-width: 4px;
fill: none;
}
</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 width = 960,
height = 500,
outerR = 200,
innerR = 1,
n = 1000
var svg = d3.select('body')
.append('svg')
.attr({height: height, width: width})
.append('g')
.translate([width/2, height/2])
svg.append('path')
var circlePoints = d3.range(0, Math.PI*2 + 1, Math.PI*2/n)
.map(function(θ){
var rv = [Math.cos(θ)*outerR, Math.sin(θ)*outerR]
rv.θ = θ
return rv
})
var pathA = circlePoints.map(function(d){
var θ = d.θ*16
return [d[0]*Math.cos(θ)*innerR, d[1]*Math.sin(θ)*innerR]
})
d3.timer(function(t){
var periods = Math.sin(t/1000)*3
var pathA = circlePoints.map(function(d){
var θ = d.θ*periods
return [d[0]*Math.cos(θ)*innerR, d[1]*Math.sin(θ)*innerR]
})
svg.select('path').attr('d', pointsToPath(pathA))
})
function pointsToPath(array){
return 'M' + array.join('L')
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment