get your pixels movin'
The logo does tricks:

Organic Morphing: Getting needed points from Adobe Illustrator

I love morph animations. They can be so hypnotic and cool. Getting the vector files ready in Adobe Illustrator can be a bit tricky, especially for certain types of morphs. I’ll show you how to tame the vector beast for buttery smooth organic SVG morphing.

A simple melt

A quick hop into Adobe Illustrator and we’ll create a half circle, which will act as a sort of ice cream without a cone. We want it to drip from the straight edge on the bottom.

To do that, I added 11 points along the bottom edge and randomly pulled a few down until it looked like it was melting (figure 1).

Figure 1. Adding 11 points for a melting effect

The morph code

Using the MorphSVG plugin from GreenSock is really simple. It’s all done with one line of code."#start", { duration: 2, morphSVG: "#end" });

Morphin’ time – go go power… oh wait. That’s something different. We did an awesome job getting the paths ready so our two paths should morph beautifully and look like it’s dripping. Here we go.

See the Pen Melt Export by Craig Roblewsky (@PointC) on CodePen.

Houston, we have a problem…

Something is wrong. That didn’t look good at all. What happened? First, I’ll say the MorphSVG plugin is terrific and it has done nothing wrong here.

You don’t even need the same number of points on each target and the plugin does an excellent job of interpolating between the paths. However, if you keep the points the same, you’ll get much more consistent and predictable results. That’s what happened here.

Thanks a lot Illustrator

AI is trying to be helpful. It looked at the start path and simplified it. Remember at the beginning when I said I added 11 points to the bottom edge of the start shape? When I exported the file, Adobe Illustrator decided we didn’t need those to make a straight edge so it wiped them out for us (figure 2).

Figure 2. Illustrator gave us this result with export.

This happens frequently

I used a few random shapes to show what happened (figure 3). On the left are the original shapes with extra points added and circled in red. On the right is the result of Adobe Illustrator’s export. Lots of points went missing.

Figure 3. This happens with all shapes and paths.

So, what’s the solution?

It’s a fairly easy fix. Don’t export. Yep, that’s right. Skip the export. Instead, select the path elements and your background rectangle so you don’t get coordinate surprises. Then copy them (Ctrl + C) or Edit → Copy. Paste them into your code editor and the extra points remain intact.

Below, you can see how different the results are for the ‘start’ path.

<!-- Regular export result --> 
<path id="start" d="M200,198.5H50c0-82.29,67.71-150,150-150s150,67.71,150,150H200Z" />

<!-- Copy and Paste result -->
<path id="start" d="M200,198.5h-23.7h-21.9h-22.2h-25.9H81.4H50c0-82.3,67.7-150,150-150s150,67.7,150,150h-18.1
	h-17.9h-16.5h-22.5h-24.8h-26.5H200z" />

Save As… also works

Please note: if you ‘Save/Save As’ the SVG, the extra points also remain intact. However, this adds a step to your workflow since you will need to open the file and copy/paste the path data into your code editor for the morph.

I personally don’t use the Save feature very often for my SVGs. I prefer to choose Export and then, instead of completing that process, I click the ‘Show Code’ button so I can just grab what I need and paste it into my project.

A smooth result

Now take a look at how nice the morph looks when all the points stay where they should.

See the Pen Melt Copy Paste by Craig Roblewsky (@PointC) on CodePen.

Side-by-side comparison

The final demo is a side-by-side comparison of the two different exports.

See the Pen Melt Side By Side by Craig Roblewsky (@PointC) on CodePen.

Overlay morph paths

I will point out that you need to create your morph paths at the same location and almost always right on top of each other.

I only used the side-by-side view earlier for illustrative purposes. When you morph with GreenSock’s MorphSVG plugin, the morph not only takes on the shape attributes of the target, but also the location. Sometimes you may want that, but usually not.

Final thoughts

You can see how smoothly you can morph from a hard-edged starting shape to something much more organic simply by adding a few points. I hope you found some of the info useful. Have fun with your organic SVG morphing and 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 26, 2020 Last Updated: July 17, 2020

You might dig these articles too

No algorithm. Just hand chosen artisanal links.