Jump to content

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

Fill SVG from the bottom up

Recommended Posts


My first post here and I'm very new to GreenSock and SVGs in general but I'm hoping I can still get some help on this very basic problem. I've done some searching but can't find what I'm looking for. I have several SVG files and I'd like to change the fill color over time but I want to start from a specific point and fill from the bottom to the top rather than just filling the entire shape at once. Any suggestions? 

Link to comment
Share on other sites

Hi @swpowe :)


Welcome to the forum.


Sounds like a good job for a clip-path. (or mask)



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

Hopefully that helps. Happy tweening.



  • Like 4
Link to comment
Share on other sites

You can also use a gradient which gives you some interesting options. By setting both color offsets to either 0% or 100% and then tweening to the other end, you can create a solid color change or fill. It also allows you to quickly change things by changing the x/y attributes of the linearGradient itself. You can make it start from the other end, switch to horizontal or diagonal.


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

Just another option for you. Happy tweening.



  • Like 4
Link to comment
Share on other sites

PointC Thank You! Exactly what I'm looking for. I appreciate the help!

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