circles1

_.md

[ Launch: circles1 ] dc8e84e9d76e91f4c564 by georules

config.json

{"description":"circles1","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},"circles.js":{"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,"ajax-caching":true,"inline-console":false,"thumbnail":"http://i.imgur.com/Yxxi7IE.png"}

inlet.js

var svg = d3.select("svg")
d3.select("body").style("background-color",d3.rgb(47,40,51))

var twoPi = 2 * Math.PI,
    gx = 300,
    gy = 282,
    color = "#eb6a74"

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(166)
    .outerRadius(250)

var meter = svg.append("g")
.attr("transform", "translate(" + [gx, gy] +")")

meter.append("path")
    .attr("d", arc.endAngle(twoPi))
.attr("fill","#0800a8")
.attr('stroke','#fff')
.style('stroke-width',"10")
.style("stroke-linejoin", "round")


anim = tributary.anim(0, twoPi)


var foreground = meter.append("path")

foreground.attr("d", arc.endAngle(2))
.attr('fill',"#0579ff")
.attr('stroke','#fff')
.style('stroke-width',"10")
.style("stroke-linejoin", "round")