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

Question

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

mark@headTrix · Answer

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.