MorphSVG: Trouble with finetuning

[Pageking]

Hi all,

 

I have been experimenting with MorphSVG and I am trying to make a button where the border morphs to a sort of arrow shaped border when you hover over it. This has been fairly successful but I see that the left side of the SVG morphs a bit and the animation still feels a bit too wavy.

 

How can you approach a problem like this? I am not that experienced with MorphSVG and would love some insight.

See the Pen JjpZMPy by wouter_pageking (@wouter_pageking) on CodePen.

[Cassie]

This is the best article on this topic. (Thanks to @PointC)

Good luck!

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator

[PointC]

Another pro tip for these kinds of morphs: change the start point of the path. The current start point is the upper left corner of the path. That's just the natural start when you create the element. Changing the start point is super easy with the scissors. I have a short tutorial about it.

https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/

 

If you ever have any doubt about the start point or path direction, you can add an arrowhead to check. More info.

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

 

Here's a screengrab of your project arrow and I've cut the path to start at the middle point of the arrow. I've also added an arrowhead in AI to double check.

When we make those changes, it all works quite smoothly and should give you the desired results.

 

See the Pen eYVKKVP by PointC (@PointC) on CodePen.

 

Happy morphing.