Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
muskan

Creating a layer of gradient within an SVG path dynamically

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 post
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 post
Share on other sites

Same technique, but using canvas. Performs much better as it doesn't have to keep a bunch of elements in memory.

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

 

.

  • Like 5
Link to post
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.

×