Jump to content

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

How to morph a shape into a new shape maintaining its size and shape

Recommended Posts

I'm practicing the morphSVGplugin and may just not be understanding its capabilities.


I'm trying to morph a shape into a new shape that is larger and in a different spot in the DOM. (It seems it only morphs a shape into another one, but the properties of the first shape are retained.)


Here's my pen, Im trying to morph the 0 into the rectangle, but the 0 is turning into the rectangle in its same spot and is like cut off with no room to be full like the rectangle. I'm not sure how I would morph the 0 into the rectangle but make it large and move into the spot of the rectangle.


See the Pen exEWWM by omarel (@omarel) on CodePen


See the Pen exEWWM by omarel (@omarel) on CodePen

Link to comment
Share on other sites

Yeah, I think you might be misunderstanding how morphing works. Basically it takes the path data (the stuff in the "d" attribute of a <path>) and interpolates between two values. Well, that's an oversimplification because it does a ton of stuff under the hood to make that happen in an intuitive way. It does not alter the fill color or other attributes as well, but of course you could animate those too (separately) if you want. But morphing is about the shape itself, and it honors whatever coordinates you feed in.


So in your example, you've got a completely different <svg> element that's elsewhere in the DOM, and the <polygon> in there that's your end shape (the rectangle) has certain coordinates baked into the shape itself - those are what are being used when morphing the "O" shape. 


It would definitely be simplest if you just put both shapes into the same <svg> element so that they share a coordinate system. If you can't do that, it makes things much, much more complicated. You'd have to do a bunch of conversions between coordinate systems (and remember, each could have transforms applied) and edit all of the coordinates in the shape accordingly. Possible? Sure. Easy? Nope, not for most developers. I guess you could also animate the <svg> so that it sits on top of the other one and stretches to match coordinate systems, but even that isn't exactly simple. 


Is there any reason you can't have both shapes in the same <svg> element? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi @omarel,


As Jack explains: morph only means morph from one to another shape.

But you can build, vary, control all the other steps (position, rotation, size, timing ...) very easily. Yes, if you like, gradually morph into multiple levels (different shapes). It depends on how it should look like.


Here is a little suggestion ...


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


Happy tweening ...





  • Like 1
Link to comment
Share on other sites

I can put them in the same SVG but then I'm not sure how the placement of an svg with a huge hidden path would lay on the page. I'd have to play with that,  especially given viewbox properties. 


Can tweenMax animate the SVG viewbox?


Link to comment
Share on other sites

@Mikel that looks like a helpful example. I'm going to play with that. 


But I'm wondering if this will work the same when the ellipse has viewbox properties. 


Link to comment
Share on other sites

Ah. I think putting the paths in one SVG and being able to animate the viewbox will solve the problem!

I'll play with this. Thank you. 

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