arc path test

_.md

[ Launch: path test ] 5061490 by jonahx
[ Launch: geometry daily #129 ] 5056075 by jonahx
[ Launch: geometry daily #129 ] 4942307 by enjalot

config.json

{"description":"arc path test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var svg = d3.select("svg")//.width(600).height(600)
var pi = Math.PI;

var arcData = d3.svg.arc()
    .innerRadius(37)
    .outerRadius(52)
    .startAngle(0) //converting from degs to radians
    .endAngle(function(t) {return t}) //just radians
    
function arcTween(b) {
  var i = d3.interpolate(0, b);
  return function(t) {
    return arcData(i(t));
  };
}

svg.append("path")
   .data([3])
   .attr("transform", "translate(200,200)")
   .transition()
   .duration(3000)
   .attrTween("d", arcTween)

style.css

circle {
  fill: none;
  stroke: #1FB41F;
  stroke-width: 2;
  opacity: 0.4
}

path {
  fill: none;
  stroke: #1FB41F;
  stroke-width: 2;
  opacity: 0.3
}