D3 Examples - glowstick

xxxxxxxxxx
 
<!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>
    