spinner animation

_.md

[ Launch: spinner animation ] 6680679 by mjgil

config.json

{"description":"spinner animation","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/p4powWj.gif"}

inlet.js

var particles = 100,
    particleSize = '6px',
    radius = 100,
    duration = 3000;

var svg = d3.select('svg');

svg.append('circle')
.attr({
  cx: 400,
  cy: 330,
  r: 35,
  fill:'#25B0B0'
})


var data = [];
var circleRadians = 2 * Math.PI;
for (var x = 0; x <= particles; x++) {
  	var ratio = x / particles;
  	var cos = Math.cos( circleRadians * ratio );
    var sin = Math.sin( circleRadians * ratio );
  data.push({x: cos, y: sin});
}

svg.selectAll('circle')
   .data(data)
   .enter()
   .append('circle')
   .attr({
     cx: function(d) { return 400 + 150*d.x; },
     cy: function(d) { return 330 + 150*d.y; },
  r: tributary.anim(2, 6),
     fill: tributary.anim('#000', '#000', {interpolate: d3.interpolateHsl})
});

svg.append('circle')
.attr({
  cx: 400,
  cy: 330,
  r: tributary.anim(35, 56),
  fill:'#000'
})