Jump to content
Search Community

Fill Missing Part of SVG

piyushwalia test
Moderator Tag

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

I have an image:


and I want to fill the missing part of it. The best way I found was to convert the missing part of the image to SVG and then start filling the missing part using tweenmax. For reference, I have added the animation for filling the svg but it is not animating like what I need i.e. it is increasing from center point. I need to blend the animation like the image missing area is filling from one end. I can change the way of animating if there is any other way we can fill the missing part of the image?

I have also tried other solution of fill mode but smooth transition is not happening in it.


See the Pen vmJEeG by piyushwalia (@piyushwalia) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo. I think for this you will do better using DrawSVG to animate the length of a thick stroke or perhaps multiple strokes.



You might want to animate a very thick stroke and then use the actual G shape as a mask or clipPath to make sure the stroked doesn't bleed outside the G.

Notice how the animated stroke fills the 5 nicely in the second demo:

without clipPath: http://codepen.io/GreenSock/pen/wdqGVb

With clipPath: http://codepen.io/GreenSock/pen/VbzaGy


In the full banner it plays faster and looks great: http://codepen.io/GreenSock/pen/zGjNGz?editors=0010





DrawSVG Plugin is available to Club GreenSock members.

  • Like 4
Link to comment
Share on other sites

You could use Carl's technique without DrawSVG by calculating the path length yourself and animating the strokeDashOffset. You'd need to use the getTotalLength() method.


Here's a similar question that shows how it could be done.



My two cents worth: I'd recommend joining Club GreenSock and using DrawSVG (& many other plugins) to save quite a bit of time and frustration with browser inconsistencies.  


Happy tweening.


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