Jump to content
GreenSock

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

Wrong morphing of an Ellipse

Recommended Posts

Here is a letter O in a thin and thick version. Both showing correctly in the svg by themselves. But when I morph them using morphSVG they don't morph correctly. They are generated with Adobe Illustrator, but the only difference is the tickness of the stroke. Something I can fix, or is this a bug?

See the Pen voQqPE by flogvit (@flogvit) on CodePen

Share this post


Link to post
Share on other sites

Hey @grensesnitt,

 

Welcome to the GreenSock Forum.

 

I do not know what's wrong with your svg.

If you need a simple O, try it here ...

 

See the Pen oNvbWEb by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

Share this post


Link to post
Share on other sites

Hey grensesnitt and welcome,

 

Why do you need to use MorphSVG for this? If you're just animating the stroke-width you can do that without MorphSVG with just a regular <circle> as mikel said. 

 

Anyway, I'm not sure why your SVGs are morphing in this way. Maybe another moderator will come around and be able to help more specifically. I do know that we have this handy video that may help you fix some potential other issues with your MorphSVG. 

 

Share this post


Link to post
Share on other sites
1 minute ago, ZachSaucier said:

Hey grensesnitt and welcome,

 

Why do you need to use MorphSVG for this? If you're just animating the stroke-width you can do that without MorphSVG with just a regular <circle> as mikel said. 

 

 

Thank you :)

 

Well, I usually get the svg from clients, which is the case with this particular svg. If I change it to a circle-tag I have to be sure it's the exactly the same, since clients do like their logo :) I'll have a look at it.

Share this post


Link to post
Share on other sites

Hey,

 

In the pen above, I added a svg with an "o".

Share this post


Link to post
Share on other sites
1 minute ago, mikel said:

Hey,

 

In the pen above, I added a svg with an "o".

Thank you!

 

I have managed to create a circle which is perfectly like the path I had, so I can go for that. But still interested in why the path morph so wrongly.

Share this post


Link to post
Share on other sites

The path isn't morphing as you'd like because your paths have some funky points. The thin has more than the thick and some of the point positions on the thin look very odd to me. Ideally on a shape like that you'd have 8 points. Here's a side by side comparison of your thin and thick.

WHXOAU3.png

 

As with all things SVG, it comes down to asset prep making your life a lot easier. Just FYI — you don't need three shapes for this. Your original and thin versions are the same. You can just morph back to the original whenever you like.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 5

Share this post


Link to post
Share on other sites

Sorry about the confusion there - I've never seen that happen before but your demo helped me find a very rare edge case in the conversion algorithm where the arc command "a" could run into a Math.acos(-1) which JS returns as NaN (weird!), so I implemented a workaround and uploaded a revised MorphSVGPlugin. Seems to work great now! (you may need to clear your cache)

 

Like others have suggested, tweaking  your path would also solve the issue. But I want MorphSVGPlugin to be as bulletproof as possible :) 

 

Thanks for being "Business Green"! 

  • Like 4

Share this post


Link to post
Share on other sites
11 minutes ago, GreenSock said:

Math.acos(-1) which JS returns as NaN

 

Rounding error. Seems that happens in other languages too.

  • Like 2

Share this post


Link to post
Share on other sites
1 hour ago, GreenSock said:

But I want MorphSVGPlugin to be as bulletproof as possible

The GreenSock Animation Platform:

 

giphy.gif

  • Haha 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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×