Jump to content


Bending SVG Paths

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
Share on other sites



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





  • Like 5
Link to comment
Share on other sites



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