Jump to content

Ali Farooq

Undraw SVG stroke from the center

Recommended Posts

Hello guys,

I'm trying to do some animation using draw SVG plugin. What I want to achieve seems really simple but I cannot do it. I've searched on the internet and the GSAP forum to see if someone faced a situation similar to mine but all in vain. Hence I'm posting the issue here. If you take a look at my codepen you can see the logo animating. What I need is the bottom two lines of the logo to "Un draw" themselves from the center upto a certain point. I'm attaching an image to show you how the final state of the bottom two lines will be.

If anyone can help me figure out how to do this with drawSVG plugin or whether what I'm trying to achieve is possible at all that would be great. Thanks again.


See the Pen XZXbzR by Ali_Farooq_ (@Ali_Farooq_) on CodePen

Link to comment
Share on other sites

Hi @Ali Farooq :)


Just to throw my two cents worth in the mix for you -- a mask could be helpful here.


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


The group of lines appearance is controlled by the mask so I added one white rectangle that is is the same size as the SVG which allows them to be completely visible. A second rectangle with a black fill is then added over the top of the white one which is scaled to block out the center of the lines. Since this is a mask and not a clip-path, you could also add a gradient if you wanted for a nice feathered edge on the lines too. Masks give you a lot of options.


Hopefully that helps. Happy tweening.


  • Like 6
Link to comment
Share on other sites

Thanks @mikel for the innovative idea. I went with your solution. Although I had to modify my SVG and write some additional code but the result was just as I needed and totally worth the few extra lines of code. @PointC I didn't know we could use svg masks like that. Thanks for the info!

I've updated my pen if you guys wish to see the final result.

  • Like 1
Link to comment
Share on other sites

23 minutes ago, Ali Farooq said:

 @PointC I didn't know we could use svg masks like that. 


I think a lot of people just use a rectangle or circle in a mask element and call it good, but you can add multiple shapes and opacity levels to come up with interesting results. In a case like yours, you could also use a circular mask and have the outside lines wrap around the shape. 


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


You're certainly not limited to primitive shapes. You can add any complex path to cut a space into lines (or other elements) and that will create a tight wrap around the edge or leave a gap as I've done in the above demo.


I like your animation as it is. I'm just throwing the mask idea our there for future reference. I'm glad you have a solution.


Happy tweening.


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