Gradient not applying correctly

[geobotsar81]

Seems like the gradient is not applying correctly.
Instead of applying the 100% offset to the end of the circle(100%) it seems to be applied at 50% and then the colors repeat in inverse for the other half:

For example green is applied to 0% orange to 50% and red to 100%.

Below you can see that red is applied to the 50% and then the colors repeat from 50% to 100% in inverse

[setaman]

Hello @geobotsar81

i think, what are you trying to achieve is the green-orange-red gradient to follow along with the progress line, this could be possibly with the conical gradient (see #107 ).

What you observe is a linear gradient from bottom to top and this is the currently available behavior of SVG gradients in modern browsers. It becomes more clear with thicker lines like in this example. So far I haven't found a simple and elegant way to implement canonical gradients. I am open for any suggestions.

If you want to communicate the progress visually with colors. the work around could be just to change the progress line color depending on the progress value.

[geobotsar81]

Thanks, that makes sense, wasnt aware of these limitations. Thanks for the suggestion, will give it a go!