Getting gradients to follow along SVG paths in Javascript
tl;dr: Here’s a link to the codebase, a link to the Storybook, and a link to the CodeSandbox, you lazy jerk.
We’ve all been there before. Some badass designer with an axe to grind gives us, the developer, yet another reasonable design request that, despite our best efforts, simply doesn’t exist in the modern web.
A tragedy.
One such task like this that I’ve come across is getting a gradient to follow along an SVG path. That should exist, right?…
Simple for a designer.
Not so simple for a developer.
A backstory
SVG gradients are great for basic tasks. You essentially have two options: <linearGradient> and <radialGradient>. Each approach allows you to define <stop> elements, which in turn define where the colors in your gradient begin and end.
The problem is that there’s no way to bend or curve a <linearGradient> to follow along with the shape of a path.
A <linearGradient> is just that… linear.
First attempts
My path to spiritual gradient enlightenment started in a familiar place, a question on Stack Overflow. See — I, too, had made the foolish assumption that such a feat had…
