Is it possible to have color gradients for a line?

[Weilin37]

I'd like the line to start with one color and end with another. I am wondering if this is possible with leaflet curve. thanks so much

[elfalem]

This could be achieved by giving the curve a class name, defining SVG gradient elements, and using CSS. This assumes you're using the SVG renderer and not canvas.

When creating the curve, give it a class name, e.g.

L.curve(..., {fill: true, ...other options..., className: 'my-curve'}).addTo(map);

Then include an SVG element on the page that defines gradients. e.g.

<svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>
</svg>

Lastly include the following CSS on the page:

<style>
.my-curve {
    stroke: url(#MyGradient);
}
</style>

And it will look something like this:

Source

[Weilin37]

Thank you for the solution!