Jump to content
Search Community

SVG/MorphSVGPlugin Tips

usernolan test
Moderator Tag

Recommended Posts

Hi there!


This might be more of an SVG composition question than an MorphSVGPlugin question, but hoping someone might be able to lend some tips on achieving the right effect for this:


See the Pen qBdZxJO by nolan330 (@nolan330) on CodePen


In the pen, you might notice that the morph "primarily" expands the pentagon into the dodecagon, with the triangle and square sort of collapsing ("merhhhh...") into single points respectively. I'm wondering how I might be able to refine the morph, perhaps using shapeIndex or tweaking the SVG itself, so that the 3 independent shapes more "equally" contribute to the final dodecagon. (I apologize I don't have a more precise vocabulary for this!)


The idea was that 3 + 4 + 5 = 12 (points), and 2 * 2 * 2 = 8 (stroke, who knew stroke grew exponentially!?), so the 3 original closed shapes might sort of compose smoothly into the final dodecagon. I think it could look pretty neat if configured correctly, but it seems like it will depend on a more clever path for the 3 independent shapes.


So far, I've tried kind of a "cheat", where the shapes are just one continuous line, but I think it could still be improved:

See the Pen LYVNQmp by nolan330 (@nolan330) on CodePen


I also tried changing the shapeIndex on the continuous line, but it doesn't seem to significantly impact the outcome:

See the Pen oNXxEyb by nolan330 (@nolan330) on CodePen


In any case, any tips or feedback welcome! And I apologize if this is more of a SVG fundamentals question/unfit for the forum.



See the Pen by (@) on CodePen

Link to comment
Share on other sites

Yeah, I like your 2nd post best. Have you tried literally taking the end shape, making a copy of it and just dragging each point to the corresponding place in the starting shape(s), and then use that as the starting shape? 


It is technically possible to have the beginning shapes break apart and form the ending one, but it's definitely advanced and would take some effort. It'd likely involve configuring the raw data string with various "M" commands (one for each starting shape) and messing with the coordinates so that the end shape has the "M" commands butted up next to each other and then animating the raw "d" value of the <path>. 

  • Like 3
Link to comment
Share on other sites

Really appreciate the feedback @GreenSock!


I’ll try more deliberate point dragging, which is a great idea, and may also take a shot at the more advanced approach too. It’s a good reason to learn more about SVG internals. In any case it’s great to know that something like that may call for going lower level.


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