animated arrow (hover)

_.md

[ Launch: force directed symbols ] 8465993 by DeBraid

config.json

{"description":"animated arrow (hover)","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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/xwiwkQ3.png"}

inlet.js

var stem = d3.select("svg").append("rect")
      .attr({
            "height": "150",
            "width": "50",
            "x": "100",
            "y": "50",
            "class": "arrow",
            "id": "stem"
      });


var arrow = d3.select("svg").append("path")
      .attr({
            "class": "arrow", 
            "d": function(d) { return 'M 50 130 L 200 130 L 125 242 z'; }
      });
    
  d3.selectAll(".arrow")
      .on({
        
          "mouseenter": function(d,i) 
            { 
              stem.transition().duration(500).attr('y',130),
                
              arrow.transition().duration(500).attr("d", function(d) { return 'M 50 240 L 200 240 L 125 300 z';}),
                
              d3.selectAll(".arrow").style({"fill": "tomato", "stroke": "tomato"}) 
            },
        
          "mouseleave": function(d,i) 
            { 
              stem.transition().duration(1250).attr('y',70),
                
              arrow.transition().duration(1250).attr("d", function(d) { return 'M 50 210 L 200 210 L 125 300 z';}),
              
              d3.selectAll(".arrow").style({"fill": "aliceblue", "stroke": "white"}) 
            }
        
      });

style.css

.arrow {
	fill: aliceblue;
    stroke: white;
  	stroke-width: 5;
}