Jump to content

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

DrawSVG with variable strokeWidth

Recommended Posts


I am trying to generate the following tween with the drawSVG plugin, whereby the image is progressively revealed with an anticlockwise motion. Any idea on how I can achieve this? 



See the Pen MWWzQVM by opeeff (@opeeff) on CodePen

Share this post

Link to post
Share on other sites

Hey Shakespeare and welcome.


You can do this sort of thing by animating a mask. The thread below gives more info on how to do it:

Let us know if you need more help!

  • Like 2

Share this post

Link to post
Share on other sites

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?

Share this post

Link to post
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

Share this post

Link to post
Share on other sites



Just one option - using gsap 3.0


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


Happy tweening ...



  • Like 4

Share this post

Link to post
Share on other sites

Thanks ZackSaucier and Mikel,

I very much appreciate your help. ZackSaucier's second solution works like a charm! 

  • Like 2

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.