Jump to content
Search Community

Creating a layer of gradient within an SVG path dynamically

muskan 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

I am creating a dynamic path using my SVG. I now wish to add gradient to my path but I am stuck. The way I am trying, my gradient is coming along the path as shown in image 2 while I require it to be the kind in image 1. Needed_Picture Current_Picture

My gradient and stroke definitions are as follows :

</svg>

script :

               ` svgPath.setAttribute("stroke-width", "10");            });`

 

I am creating a dynamic path using my SVG. I now wish to add gradient to my path but I am stuck. The way I am trying, my gradient is coming along the path as shown in image 2 while I require it to be the kind in the image named as Current.

My gradient and stroke definitions are as follows :

</svg>

script :

               ` svgPath.setAttribute("stroke-width", "10");            });`

post-52002-0-28458700-1491888979_thumb.jpg

post-52002-0-98273600-1491888989_thumb.png

Link to comment
Share on other sites

continued from a PM sent to me...

 

Gradients will not follow a path. There are ways to manually create one, but SVG really isn't ideal for this as performance will start to degrade exponentially.

See the Pen LyPNMP by osublake (@osublake) on CodePen

 

You should definitely explore using canvas for this type of thing. It will perform much better.

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