Jump to content

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

Morph 2 SVG paths into 1 circle

Recommended Posts

Hi everyone, 


I've been playing around with Greensock the last couple of days and just wondered if it's possible to morph / animate 2 paths into a single path? 

In the codepen, you'll see I form a square but the way I've done it is with 2 paths. Just purely so I could animate it in the sequence I have. "Up, Right, Diagonal, Right & Up" I couldn't achieve this with a simple square SVG or at least I don't think so. 


What I want to do next is morph the 2 paths that make a square into a circle is this possible? 


Hope this makes sense. 

See the Pen QBrLjY by craig_codes (@craig_codes) on CodePen

Link to comment
Share on other sites

Hi @craigib :)


Welcome to the forum.


The short answer is no. The morphSVG plugin works path to path so if you morphed those two into the circle they would each morph into their own circle. Probably not what you want.


You can fake it though. At the end of the timeline you can hide the two paths that draw your square and swap in a new square which could be morphed into a circle. Something like this:



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


Hopefully that helps. Happy tweening.



  • Like 5
  • Thanks 1
Link to comment
Share on other sites

Thanks for that, I thought it might be the case that I need to hide the 2 and create a new one.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.