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

Link to comment
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

 

Link to comment
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. 

 

Link to comment
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.

Link to comment
Share on other sites

Hey,

 

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

Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
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.
×