Jump to content
Search Community

DrawSVG with variable strokeWidth

Shakespeare test
Moderator Tag

Recommended Posts

Thanks! After viewing all the examples, I can definitely see how this might work by incrementing the angle of the masked object (in this case an ellipse). The problem is that I don't know how to accomplish this. The drawSVG does this at the path level not at the fill level; which means I would need to generate a new path for each iterration to achieve the desire effect. Sounds, and most certainly is, crazy. Any thoughts on how I can accomplish this? Am I on the right track?

Link to comment
Share on other sites

First off, where the heck did you get that curve from? That's an insane amount of points for a shape so simple, haha. 

 

The main difficulty is setting up your SVG correctly. So you should go ahead and recreate the exact shape that you need. To create a fade like that you could create two ovals (probably using <ellipse>s), one with the blueish color fill and one with a white fill (or whatever the background color is going to be). Then offset the white one, maybe adjust its height, and make sure it's on top.

 

Once you have that, then create a path that goes around all of the visible (blue) area. You can do that by duplicating the blue oval and then converting it to a path. GSAP's MorphSVG has that conversion functionality built in. Make sure that it has a thick enough stroke-width to cover the blue in all sections. If you constructed your SVG like I described, then you don't even have to turn the path into a mask, you can just leave the stroke as white.

 

Thus in your SVG you shouldn't see anything :) because the white oval and path with stroke should be covering your blue part. But if you delete the path with stroke you should see the shape that you have above. 

 

Then in your JS you can use drawSVG on the path with stroke to hide it, i.e. something like TweenLite.to("#pathWithStroke", 1, { drawSVG: 0}); or in GSAP 3 gsap.to("#pathWithStroke", { duration: 1, drawSVG: 0});.

 

And voilà! You will have the animation that you need.

 

Here's a really rough implementation of it. 

 

See the Pen BaaGvqW by GreenSock (@GreenSock) on CodePen

 

If you need help animating it from a certain point see this thread, but hopefully you create your SVG in such a way that this isn't necessary :) 

 

 

  • Like 3
  • Thanks 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...