Jump to content


drawSVG with Gradients

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

If someone could help...when I load my page, my drawSVG works fine, but I cannot get a gradient to fill in the country when the drawSVG completes.  I'm sure it's something small I'm missing, could use a second perspective.  



See the Pen mLGReQ by jh314 (@jh314) on CodePen

Link to comment
Share on other sites

Hi @jh2k314 :)


Welcome to the forum.


I'm not sure I understand the desired outcome here. DrawSVG only works with strokes and none of your paths have a stroke. Your demo is also missing the DrawSVG plugin. For SVG paths, you'd want to use 'fill' instead of 'background'. Or were you trying to change the background of the parent div? I couldn't quite tell what should be happening in the second tween on the timeline.


If you could provide some more details about what you'd like to happen, we can point you in the right direction.


Happy tweening.



  • Like 2
Link to comment
Share on other sites



Thank you for the corrections, I made the adjustments.  What I'm trying to do, is when the web page loads, the drawSVG plugin will outline the country, (in my example I'm using Canada and the USA), after it completes drawing the stroke around the country I'm trying to fill that country with a gradient.  

I've tried the fromTo tween, not working.  Not sure what I'm missing or if you or anyone else knows of a better way to accomplish this.


Much thanks,

Link to comment
Share on other sites

Okay, looks like you have the DrawSVG part working now. If you want to animate from a solid fill to a gradient on a path, you'll want to animate the stop-color of your gradient. Here's a quick example.


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


See how it's not actually animating the fill of the path, but rather the stop-color of the gradient? The path fill is always the gradient. We're just changing the gradient stops to the same color. Does that help?


Happy tweening.



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