Path animation - complex

_.md

[ Launch: Path animation - complex ] 4962338 by roundrobin
[ Launch: SVG Path Element ] 4958914 by roundrobin
[ Launch: SVG Path Element ] 4958860 by roundrobin
[ Launch: Bootstrap Trib ] 4711978 by roundrobin
[ Launch: Tributary inlet ] 4711690 by roundrobin

config.json

{"description":"Path animation - complex","endpoint":"","display":"svg","public":true,"require":[{"name":"Helpers","url":"https://raw.github.com/roundrobin/svg-path-generator/master/svg-path-generator.js"}],"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":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,"thumbnail":"http://i.imgur.com/w5HWTKi.png"}

inlet.js

//Uses the svg-path-generator class
//https://github.com/roundrobin/svg-path-generator

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

svg.append('path')
.attr({
	stroke: "black",
	"stroke-width": 3,
	fill: "none", 
	d: "M0,0 L100,100 L200,200",
	transform: "translate("+[0,0]+")"
})
.transition()
.duration(2000)
.attr('d','M0,0 Q12,12,100,100')
;