Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/index.html

Last active September 30, 2017 16:55
Show Gist options
  • Save 1wheel/de3824e045523ac67a56 to your computer and use it in GitHub Desktop.
Save 1wheel/de3824e045523ac67a56 to your computer and use it in GitHub Desktop.
Download ZIP
glowstick
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg{
display: block;
margin: 5px auto;
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 s = 490
var svg = d3.select('body').append('svg')
.attr({width: s, height: s})
.append('g')
.translate([s/2, s/2])
var defs = svg.append('defs')
var filter = defs.append('filter')
.attr({id: 'glow'})
filter.append("feGaussianBlur")
.attr({stdDeviation: 3, result: 'coloredBlur'})
var merge = filter.append('feMerge')
merge.append('feMergeNode')
.attr({in: 'coloredBlur'})
merge.append('feMergeNode')
.attr({in: 'sourceGraphic'})
var arc = d3.svg.arc()
.innerRadius(s/2 - 20)
.outerRadius(s/2)
.startAngle(Math.PI)
.endAngle(function(d){ return Math.PI + Math.PI*2*d })
.cornerRadius(100)
var curRadius = Math.random()
var pathBG = svg.append('path').attr('d', arc(curRadius))
.attr({fill: '#f0f'})
.style('filter', 'url(#glow)')
var pathFG = svg.append('path').attr('d', arc(curRadius))
.attr({fill: '#fcf'})
setInterval(function(){
var newRadius = Math.random()
d3.selectAll('path').transition().duration(750)
.attrTween('d', function(d){
var i = d3.interpolate(curRadius, newRadius)
return function(t){ return arc(i(t)) }
})
.each('end', function(){ curRadius = newRadius })
}, 1000)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment