What's the best way to liquid-morph multiple shapes into a single shape?

[hey]

 

I'm trying to create a logo for my website. Ideally, I would like all four letters to liquid-morph into a single blob, which then morphs into a fist. Doesn't have to be in two stages.

 

Currently, they morph but not in a sleek, organic way. Letters 'F' and 'I' shrink and disappear, while the rest is also just meh. As you can see, I've played with shapeIndex, type, map, origin. Nothing gave me the desired result. 

 

Do you have any tips or recommendations? Thank you in advance.

 

 

See the Pen dyEYjdq by alananal (@alananal) on CodePen

[mvaneijgen]

Morphing multiple elements in to one shape should be impossible, but the wizards over here have found a way with the MorphSVG plugin. But of course it is going to be weird. 

 

You morph to one shape, but this doesn't have to be the case, as you can see in your example already the thumb morphs from the "T", but some careful planning and some extra shapes (maybe for each finger one), just cut them in your design program the body of the "i" looks already like a finger, so If you can make your fist out of several shapes I think I twill be looking a lot smoother. 

 

Also check out this tutorial by our own @PointC it really helped me understand how to prepare shapes for animating. Hope it helps and happy tweening! 

 

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

[hey]

Oooh, great article with a lot of great tips! Thanks again, Mitchel. I'll also experiment with slicing the final shape as you suggested. 🙂