Can I Morph this complicated SVG?

[Shalaw Fatah]

I have a project where I have to do some cool animations with this SVG lines, so I tried to morph the circular SVG lines to the straight ones. Is there anyway to do it, the usual way cannot achive it. 

Any help would be great.

Thanks and happy tweening

See the Pen XWmOgrm by shalaw1889 (@shalaw1889) on CodePen

[ZachSaucier]

Hey Shalaw and welcome.

 

The biggest issue is that you're not properly loading GSAP or MorphSVG in your CodePen. We recommend that you start CodePens by forking the GSAP Starter Pen so that you make sure that all GSAP plugins are loaded.

 

The second issue is that you're attempting to morph an SVG <rect> (.cls-1) which, as Craig (PointC) pointed out in your other thread related to morphing SVGs, won't work. MorphSVG works with SVG <path> elements. So you should convert that to paths as well:

MorphSVGPlugin.convertToPath("polygon, rect");

The third issue is that you're attempting to morph that into a <g> element (.cls-2), which won't work for the same reason. You should select an individual path instead.

 

In this case you likely want to loop through each path and create a tween that morphs that path into the other path that you want it to turn into. Optionally you could make these tweens part of a timeline so that you have control over all of them at the same time.

 

Does that make sense? We're happy to help if you have specific issues.

[Shalaw Fatah]

hi @ZachSaucier I was finally able to work it out after reading your comment, needless to say I had to review all the basics of SVG and how it works, [what's path, rect, and so on], but this is the final result. I hope you like it: 

https://animation-example-shalaw.netlify.app/

[ZachSaucier]

15 hours ago, Shalaw Fatah said:

needless to say I had to review all the basics of SVG and how it works, [what's path, rect, and so on]

Understanding what's going on is definitely the best way to go about it  

 

Good work!

[PointC]

Nicely done @Shalaw Fatah  👍

 

Look at all the progress you've made from that first moon --> star morph. Thanks for sharing and happy tweening.

  

[Shalaw Fatah]

Thanks @PointC I've definitely learnt more about web animations in two days more than I ever knew. This is great, but I'll be asking frequent questions for some time until I get everything ready, possibly for a month or two.