Jump to content
Search Community

Is it possible to choose the start origin with MorphSVG?

Zeyi test
Moderator Tag

Recommended Posts


I was wondering if is possible to change the direction in which 2 paths are being morphed.

Currently, my path is being morphed from left to right, which doesn't look that great. Is it possible to modify it so that it starts morphing from the center and expand outwards?

The link to my animation is https://codesandbox.io/s/confident-violet-lywmu?file=/src/Animate.js

See the Pen Animate.js by s (@s) on CodePen

Edited by Zeyi
The Codepen URL did not display
Link to comment
Share on other sites

hello zeyi,

that's a very nice animation that  you are working on. 

i have a few simple suggestions that might be helpful:


a) play the timeline in reverse: tl.reverse(0);

b) reverse the direction of the path using an editor like Inkscape 

c) try using the progress() method 

d) switch between from() and to() methods


  • Like 3
Link to comment
Share on other sites

Hey @Zeyi,


More suggestions: you could use linear or rotational morphs or custom origins and findMorphOrigin () - more here in the docs.

Or you can partially open up the area so that the individual areas can be animated better.


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


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


Happy morphing ...


  • Like 4
Link to comment
Share on other sites

Thanks Mikel, findMorphOrigin was very helpful. It helped me visualize that only the left shape is the one expanding to to the new shape, while the other two were trying to scale to 0. I fixed my problem by morphing it into a centered circle first, then with this new shape morph back into my desired shape.

  • Like 1
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.
  • Create New...