test

_.md

[ Launch: test ] 11152804 by enjalot
[ Launch: test ] 11094354 by procoder-net
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"test","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}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg")

g = svg.append('svg:g')

var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
              .attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");
grad.append("stop").style("stop-color", "red")
.attr("offset", "0%") //initial state
.transition()	// everything we do on this selection after this call will be transitioned
.duration(1000) // in milliseconds
.ease("bounce") // https://github.com/mbostock/d3/wiki/Transitions#d3_ease
.attr("offset", "60%") //the value we want to ttransition to

grad.append("stop").attr("offset", "0%").style("stop-color", "white");

g.append("svg:path")
  .attr("d","M 30 50 L 30 200   a25,25 0 1,0 25 0 L 55 50 M 30 50 a15,15 0 0 1 25 0")
  .style("stroke-linecap", "round")
  .style("stroke-width", 6)
  .style("stroke", "rgb(204,204,204)")
  .style("fill", "url(#grad)")
.transition().duration(2000)
  .style('shape-rendering', 'geometricPrecision')