Possibility to use a color gradient in the counter?

[paternax]

Hi,

it would be great to use a color gradient for the circle in the counter element

[forrestkirby]

Hi paternax,

thank you for your FR. I did a bit of research on this topic and, unfortunately, came to the conclusion that at the moment I will not try to add this feature. The reason is that – given the counter element is using an SVG circle element – the only options available would be to have a linear or radial gradient (example on codepen).

Example linear gradient

Example radial gradient

However, I guess your intention rather was to have something looking like the following.

This would require a conic gradient for the SVG circle element, I think, which is currently not available.

Alternatively, it might be possible to achieve by replacing the circle element with paths. But this would require many calculations and I am not sure whether the drawing animation could be kept. In any case, this is would require changing a lot of the element layout and is probably beyond my mathematical skills.

If you find a rather simple example/tutorial how this can be achieved with an SVG circle keeping the drawing animation, I would be glad to check it out.

Kind regards

[paternax]

Hi forrestkirby,

thank you very much for your detailed answer. For my purposes it would be enough to have an linear gradient like in your first example. I edited the svg in the developer tools and it look perfect with the adapted code from the codepen example `

<circle class="counter-value" cx="82.5" cy="82.5" r="75" stroke="url(#gradient)" stroke-width="10" fill="none" style="stroke-dashoffset: 0px; stroke-dasharray: 471.239px;"> ` Is there a possiblity to integrate the defs in the element? Kind regards

[forrestkirby]

Thanks for the feedback, I will take a look at this and let you know.

[paternax]

Thank you very much. It would be great if it were possible.