Jump to content


Animating Filled Paths in a Fashion Similar to DrawSVG

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



Is it possible to animate a filled path so it effectively draws like the drawSVG plugin does for stroked paths?  Will it be a case of having to learn how to animate SVG coordinates (if this is even possible?).  

I have seen a (somewhat complicated) method on StackOverflow on how to convert a filled path into a stroked path.  Any tips / suggestions on further reading on how to create a 'draw' effect on filled paths would be wonderful (if it is possible to do).




Link to comment
Share on other sites

Hi @emilychews :)


I can think of a few approaches. It really depends a lot on the path you're trying to animate. It might be as simple as a primitive shape used as a mask/clip-path over the top of your filled path. You could animate the size of the path itself via scale/width/height or maybe morph it. In some cases you can use a stroked path over the top of your filled path that will act as a mask. You can then use the drawSVG plugin for that mask to animate on creating the illusion of the filled path being drawn. It just has to be wide enough to cover the filled path.


As I mentioned, it really depends on the situation. If you happen to have a demo of what you're doing we may be able to point you to a more detailed solution.


Happy tweening.


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