Animating Filled Paths in a Fashion Similar to DrawSVG

[emilychews 17 Likes (Newbie)]

Hi,

 

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).

Thanks,

 

Emily.

[PointC 8,599 Likes (Superhero)]

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.