Shape Tween between two SVG paths using D3.JS (Budget negotiatable))

Shape Tween between two SVG paths using D3.JS (Budget negotiatable))

Cancelled

Job Description

D3 Javascript Library : http://d3js.org/
This is a project to create a shape tween animation between two SVG paths using the built in interpolators in the D3.JS library. An example of this effect can be found here: http://bl.ocks.org/3081153

I will provide you with all of the path data for the two shapes. I would like to use the default easing cubic-in-out and whichever interpolation method in D3 that yields the smoothest results. The shapes do not contain the same number of points but this can be overcome by using duplicate points on the shape with the lesser amount. Please write the code in JS fiddle and send the URL when you have a working version: http://jsfiddle.net/

Attached is an image that shows the two paths to tween between. Below is the path data for each shape:

SVG Icon 1:

d="m 8.3185795,-36.460209 36.2710195,0 c 1.93742,0 3.49715,1.55106 3.49715,3.477714 l 0,33.04457153 c 0,1.92665397 -1.55973,3.47771397 -3.49715,3.47771397 l -36.2710195,0 c -1.93742,0 -3.49714,-1.55106 -3.49714,-3.47771397 l 0,-33.04457153 c 0,-1.926654 1.55972,-3.477714 3.49714,-3.477714 z"

SVG Icon 2:

d="m 71.571428,56.835103 c -5.994735,0 -10.821432,5.350569 -10.821432,12 l 0,15.607142 -16.214285,0 c -11.045998,0 -19.999999,8.954 -19.999999,19.999995 l 0,513.07141 c 0,11.046 8.955001,20 19.999999,20 l 274.607109,0 c 11.045,0 20,-8.954 20,-20 l 0,-234.07142 10.39285,0 c 5.85,0 10.57143,-4.72043 10.57143,-10.57142 l 0,-64.42857 c 0,-5.849 -4.72143,-10.60715 -10.57143,-10.60715 l -10.39285,0 0,-7.17857 10.39285,0 c 0.73125,0 1.41761,-0.0732 2.10714,-0.21428 1.03429,-0.21164 2.02807,-0.54657 2.92858,-1.03572 0.30016,-0.16305 0.6111,-0.34538 0.89285,-0.53571 0.84525,-0.571 1.60244,-1.28681 2.25,-2.07143 0.64757,-0.78461 1.16945,-1.65683 1.57143,-2.60714 0.13399,-0.31676 0.25399,-0.63265 0.35714,-0.96429 0.1032,-0.33164 0.17947,-0.65528 0.25,-1 0.14109,-0.68943 0.21429,-1.41173 0.21429,-2.14285 l 0,-64.42857 c 0,-2.19375 -0.64367,-4.23827 -1.78571,-5.92858 -1.90342,-2.81718 -5.12947,-4.67857 -8.78572,-4.67857 l -10.39285,0 0,-7.17857 10.39285,0 c 5.85,0 10.57143,-4.72242 10.57143,-10.57143 l 0,-64.42856 c 0,-5.849 -4.72143,-10.60715 -10.57143,-10.60715 l -10.39285,0 0,-7.82143 c 0,-11.045995 -8.955,-19.999995 -20,-19.999995 l -13.17858,0 0,-15.607142 c 0,-6.649431 -4.79098,-12 -10.78571,-12 l -223.607102,0 z"

Open Attachment