glowstick

<!DOCTYPE html>
<meta charset="utf-8">

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>