get your pixels movin'
The logo does tricks:

Cut your path start points in Adobe Illustrator

Whether you’ve created your own vectors or downloaded some stock artwork, the scissors tool is a quick way to get better morphs. You can also completely control the path start points of your DrawSVG animations.

A couple simple shapes

I have an example using a couple of heart shapes. This is just an icon from a collection I downloaded. The designer has the first point in the upper right curve of the heart. That’s probably not the best start point for any type of animation and needs to be fixed. 

You can now export the SVG.

Here’s the difference with DrawSVG

You can see on heart one (as originally designed), the path starts drawing from an unnatural position. In heart two, I’ve made a cut at the bottom and the animation feels better. It also animates the way a heart would naturally be drawn.

See the Pen Scissors cut new start point DrawSVG by Craig Roblewsky (@PointC) on CodePen.

Here’s the difference with MorphSVG

Again, the first heart and star are left as the original designer created them. You can see the morph looks pretty good, but has a bit of a twist to it.

I used the scissors on both heart two and star two to cut right at the center of the bottom. This morph looks much more natural. The bottom point of the heart splits into the bottom two points of the star and the twisting motion is now gone.

See the Pen Scissors cut new start point MorphSVG by Craig Roblewsky (@PointC) on CodePen.

You can see how one simple cut on your path can dramatically change the look and feel of your animation. Until next time, keep your pixels movin’.

If you found this information useful, please help me get the word out to the interwebs. I appreciate it. You're awesome!

Published: June 16, 2020 Last Updated: July 13, 2020

You might dig these articles too

No algorithm. Just hand chosen artisanal links.