Jump to content
Search Community

Fill SVG from the bottom up

swpowe 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

Hello! 

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

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