Jump to content
Search Community

Can I use GSAP to "color in" an outlined SVG?

sadmansh test
Moderator Tag

Recommended Posts

Hi all!

 

So I have an SVG image that is basically an outline of a Chinese letter: https://imgur.com/a/WxcxIgr and I would like to fill this in with brush strokes when the SVG image is hovered, while making sure that the strokes are confined within the outline. Kind of like this: https://imgur.com/a/AdoPnkx The brush strokes will not fill the SVG all at once, but basically as the cursor is moved over it.

 

Can I use GSAP for this? Still pretty new to this so any pointers to the right direction would be highly appreciated!

Link to comment
Share on other sites

Hey sadmansh. Giving the user control over the reveal is likely more difficult to do than you think, especially if you're wanting some sort of semi-realistic brush effect. My first thought is to layer a canvas with the solid color painted over top of your image and then use some trickery to make certain parts transparent on mouse move like this StackOverflow post suggests

  • 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.
×
×
  • Create New...