Arrow

_.md

[ Launch Inlet ]
Gist #3200444

config.json

{"description":"Arrow","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.5015625000000001,"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,"hidepanel":false}

inlet.js

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

var growValue = 20;

var path = svg
     .append('svg:path')
                .attr("fill",growValue > 0 ? "#3d9f9f" : "#e05226")
                .attr("d","M0.043,11.403C3.83,10.414,7.572,5.852,8.777,0c1.463,5.852,4.992,10.414,8.778,11.403  c-2.495,0.56-5.163,0.215-7.616-0.387v12.393c0,2.839,3.83,8.52,7.616,9.466v14.63c-3.786-0.989-7.056-3.614-8.778-7.487  C7.1,43.891,3.787,46.516,0,47.505v-14.63c3.787-0.946,7.66-6.627,7.66-9.466V11.016C5.207,11.618,2.539,11.963,0.043,11.403  L0.043,11.403z")
            
var bb = path.node().getBBox();
path.attr("transform",function(d,i){
  return "translate(100,200)rotate("+(-145.68)+" "+(bb.x + bb.width/2)+" "+(bb.y + bb.height /2 )+")";
});