Morph 2 SVG paths into 1 circle

[craigib]

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.

[PointC]

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.

 

[craigib]

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