Best way to morph from a shape with a hole in it to a solid rectangle / closing the hole

[shy_seagull]

Hi there,

I’m trying to use the MorphSVGPlugin to animate a mask that hides/reveals the html element behind it. For that I’m using canvas for performance reasons.
I couldn’t really get a canvas clipping mask going so I just exported a subtracted shape from figma and used it as a single "evenodd" path. I am then morphing between those forms to change the hole/clipping area. There’s probably a better way to do this?

Anyway what I really want to do now is also completely closing / opening that hole by morphing to a solid rectangle. Right now when I do this every point just zooms to the top right as it morphs, which makes sense, but I would love to have it open and close from the center as in scaling the hole/clipping area to 0 and back. I hope I made myself clear.

Thank you!

See the Pen ZEBjLZq by lkssmnt-the-lessful (@lkssmnt-the-lessful) on CodePen

[ZachSaucier]

In order to show everything I recommend creating a new path (preferably using the points from your original path) that essentially make a really thin border around the entire rectangle. Then morph to that path.

[shy_seagull]

Thank you Zach! I would however like to do the opposite. To close the hole so to speak, so that the rectangular canvas covers everything. I hope that makes more sense now?

[PointC]

So the negative space would just close up? Yeah I think grabbing the original vector and pull the points until it makes a solid rectangle would work well. You said you're using Figma, but I do have an article about organic morphing if you ever use Adobe Illustrator.

 

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

[shy_seagull]

Thank you! Would there also be a way to animate the negative space instead of the positive? Right now I have one shape that looks like this (the shape is purple) but I think it might be easier to animate only the inner, negative shape and have another rectangle as the positive shape behind it.

 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip

I tried to use these methods but couldn’t get it to work the other way around, meaning having a solid rectangle and subtracting an inner form from it.

See the Pen JjbaEpe by lkssmnt-the-lessful (@lkssmnt-the-lessful) on CodePen

[PointC]

I'm not entirely sure I follow. I would:

1. Start with a rectangle
2. Cut out the zagged shape for the reveal
3. Duplicate the cut rectangle
4. Push and pull points of the duplicate until it closes up
5. Morph between the two shapes.

Something like this.

See the Pen MWbqOgb by PointC (@PointC) on CodePen

 

Does that help at all?

 

Happy tweening.

 

[shy_seagull]

Craig, you are the best! For some reason I thought moving points to the same coordinates would glitch out the form, but that apparently had something to do with something else. Works like a charm now!

[shy_seagull]

I’m afraid I have one more question. At first I thought you had just put all of the points of the closed shape on one straight line but it appears you have pushed them further. I checked putting it into this pen:

 

See the Pen dyOqdZZ by lkssmnt-the-lessful (@lkssmnt-the-lessful) on CodePen

 

Now when I push my points in Figma or Illustrator over each other they create these kind of shapes which produce holes again. These holes also appear when I put them in my gsap project. So we are still doing something a bit different I guess? I just can’t figure it out, sorry!

[shy_seagull]

Sorry, I take that back! It’s only Figma that does that. Illustrator closes off the shape! Very interesting though.

[shy_seagull]

And yet another update. Sadly the same problem with the overlap appears when I try to do just that while using canvas. I suppose it has something to do with the filltype="evenodd"?

See the Pen xxRaYyL by lkssmnt-the-lessful (@lkssmnt-the-lessful) on CodePen

 

Here is the same shape in an inline svg producing different results and closing the negative space:

See the Pen GRNXQXw by lkssmnt-the-lessful (@lkssmnt-the-lessful) on CodePen

[tailbreezy]

13 minutes ago, shy_seagull said:

I suppose it has something to do with the filltype="evenodd"?

 

Indeed looks that way. Have you tried setting:

ctx.fill("nonzero");

 

It seems to do what you want.

[shy_seagull]

16 minutes ago, tailbreezy said:

 

ctx.fill("nonzero");

 

Thank you! With this it’s working now!

[PointC]

1 hour ago, shy_seagull said:

At first I thought you had just put all of the points of the closed shape on one straight line but it appears you have pushed them further.

Yep - that's intentional. With any of my SVG work like that I try to create a little overlap rather than make it pixel perfect. Depending on what you're doing, it may not be possible. But, if you can, it'll save you some headaches down the road. 

 

Glad to see you've got everything sorted now. Happy tweening and thank you for your continued support with a Club membership.

 

[ZachSaucier]

3 minutes ago, PointC said:

With any of my SVG work like that I try to create a little overlap rather than make it pixel perfect

Relevant.