Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

MorphSVG - How to convert one shape into multiple smaller pieces?

Recommended Posts



I have a square that I want to morph into three circles.

Is it possible to morph one shape into multiple smaller ones in one transition - versus having it transform into each individual shape?

The Codepen I've included has a square that transforms into one blue circle - but the actual 'whole' shape is three circles lined up.


Thank you!


tl = new TimelineMax({});

MorphSVGPlugin.convertToPath("circle, rect")

tl.to("#red", 1, {morphSVG:"#blue", fill:"#0000FF", ease:Back.easeOut.config(1), y:0}, "+=0");


See the Pen bEmWPe by anon (@anon) on CodePen

  • Like 1

Share this post

Link to post
Share on other sites

Hi axy2016 :),


Welcome to the forums.


The MorphSVG plugin works path to path - so to make a square morph into three separate circles, you'd have to make your three circles into a single path and I don't think you're going to get the quality you'd like by doing it that way. To get the best results with the most control, I'd say you want to stay with a path to path process.


You can make your three initial shapes look like a solid square and then morph to three circles. I made a pen to show you how that could work.

See the Pen yeRXRx by PointC (@PointC) on CodePen


I used 2 small squares and a rectangle to create the illusion of one large square and then grouped those three elements so I could control them as if they were just one element. Those three pieces then morph into the circles. The only problem I ran into was that I could see the edges of the three elements making up the 'fake' square even though the positioning was perfect. I solved this by adding a stroke to those paths that matched the background color.


I'm not sure what your project is, but hopefully this helps or gives you some ideas.


Happy tweening.


  • Like 5

Share this post

Link to post
Share on other sites

Great demo, Craig.


Yes, I think you are right that doing the extra work of breaking apart the square will give you the best control.


For kicks, I did a quick job of splitting one square into 3 circles and it's actually pretty good:



  • Like 5

Share this post

Link to post
Share on other sites

Thanks Carl. :)


I actually made something similar to your demo when I first started working on an answer for this post, but switched back to the multi-path route for better control.

  • Like 2

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.