sadmansh Posted August 14, 2020 Share Posted August 14, 2020 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 More sharing options...
ZachSaucier Posted August 14, 2020 Share Posted August 14, 2020 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. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now