Jump to content
GreenSock

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

Bending SVG Paths

Recommended Posts

Image: https://www.dropbox.com/s/r2tgtnenucbz3dt/Screenshot 2017-07-23 14.30.07.png

 

I'm trying to make the image on the left (a staple) morph into the image on right ("S") by bending the path into place vs. the effect I currently get with morphSVG. The effect I currently get is more "blob-like" when the transition happens vs. a smooth and graceful bend that I prefer. Any suggestions to help me get on the right "path?" 8-)

Link to post
Share on other sites

Hi GRAY GHOST,

 

You surely looked at the page of the  "MorphSVGPlugin": https://greensock.com/morphSVG  

 

One option:  The shapeIndex property allows you to adjust how the points in the start shape are mapped. In order to prevent points from drifting wildly during the animation - use the findShapeIndex.js.

 

 

Another option: If the sign is a pure stroke / path (not a shape with a lot of points) it looks smoother:

 

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

 

Hopefully this is helpful ...

 

Kind regards

Mikel

 

 

 

  • Like 5
Link to post
Share on other sites

Hi,

 

Just for fun - another way to convert shapes to paths:

 

See the Pen KgRdVK by chrisgannon (@chrisgannon) on CodePen

 

Thanks to Chris Gannon!

 

 

Link to post
Share on other sites

I haven't tried it, but my first thought was use three separate paths for the morph. That should reduce the 'blob-like' issue you're having. You could then use a clockwise rotation of the bottom horizontal piece as it morphs to improve the effect.

 

Just my two cents. Happy morphing.

:)

  • Like 4
Link to post
Share on other sites

Thanks for the insight and help Mikel. 

 

One thing I'd ask is to remove any public pens that showcase this effect using the designs I've posted, but feel free to use different artwork to showcase a similar effect I'm going for. Again, appreciate the help 100%.

  • Like 1
Link to post
Share on other sites

You image isn't up there anymore.

 

Morphing a Bezier curve can result in a blob like shape because it has points that don't lie on the curve. If you need more control over the shape, try using a polyline. With enough line segments, you can make a polyline look like a smooth curve. It might involve a little bit of manually tuning.

  • Like 3
Link to post
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.

×