Being able to animate/morph SVG icons in HTML/JS/CSS?

[murkf81204167]

Currently struggling to morph between two SVGs: https://jsfiddle.net/vu16bw0z/ but it's not going as intended. Any help would be much appreciated!

[murkf81204167]

It's been some good 10-20 years since I last tried tweening in Flash, but maybe this is the way forward?

Thanks a lot for reading!

[mark@headTrix]

do you have  to program it  from scratch? If they are both vector shapes (which they are!) you can simply break them apart and then use a Shape Tween to mortph the icons. You can also use Shape Hints to aid  which points from one icon morph into the 2nd icon.

I created a beginner  Animate series for the Adobe  Animate team --  here is a short  video on Shape Tweens. 
Once created,  you can export to HTML5 and BOOM!  Much easier then writing all that code!
https://youtu.be/Hll1Tkqphtc

Hope this helps!
Mark

[murkf81204167]

That is so unbeleivably cool, thank you so much Mark!