Bending SVG Paths

[GRAY GHOST 11 Likes (Newbie)]

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?" 

[mikel 1,823 Likes (Superhero)]

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

 

 

 

[mikel 1,823 Likes (Superhero)]

Hi,

 

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

 

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

 

Thanks to Chris Gannon!

 

 

[PointC 8,599 Likes (Superhero)]

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.

[GRAY GHOST 11 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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.