Best way to add conic gradient to the circle in SVG - reactjs

Question

I have a donut-like circle (progress circle) in React component and I want to add conic gradient to it. How to do that?
I know that in SVG we can not use conic gradients. I thought it can be done by using mask and usual block with added css with gradient but not sure how to do it correctly.
Now it looks like this:
React component:
import React from 'react';
import { Box, Text } from '#chakra-ui/react';
const GradientProgress = ({ modifier, score, size, strokeWidth }) => {
const DIAMETER = 51;
const WIDTH = DIAMETER + strokeWidth;
const RADIUS = DIAMETER / 2;
const CIRC = 2 * Math.PI * RADIUS;
const foregroundCirc = (CIRC * score) / 100;
const frontCirc = (CIRC * modifier) / 100;
return (
<Box
position='relative'
style={{ width: `${size}px`, height: `${size}px` }}
sx={{
circle: {
background:
'conic-gradient(from 270deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 72% 75%, #ff4800 95%)',
},
}}
>
<svg
className='donut'
transform='rotate(-90)'
viewBox={`0 0 ${WIDTH} ${WIDTH}`}
>
<circle
className='donut-ring'
cx={RADIUS + strokeWidth / 2}
cy={RADIUS + strokeWidth / 2}
fill='transparent'
pathLength={CIRC}
r={RADIUS}
stroke='#d2d3d4'
strokeWidth={strokeWidth}
/>
<circle
className='donut-segment'
cx={RADIUS + strokeWidth / 2}
cy={RADIUS + strokeWidth / 2}
fill='transparent'
opacity={0.5}
pathLength={CIRC}
r={RADIUS}
stroke='green'
strokeDasharray={`${frontCirc} ${CIRC - frontCirc}`}
strokeDashoffset={0}
strokeLinecap='round'
strokeWidth={strokeWidth}
/>
<circle
className='donut-segment'
cx={RADIUS + strokeWidth / 2}
cy={RADIUS + strokeWidth / 2}
fill='transparent'
pathLength={CIRC}
r={RADIUS}
stroke='red'
strokeDasharray={`${foregroundCirc} ${CIRC - foregroundCirc}`}
strokeDashoffset={0}
strokeLinecap='round'
strokeWidth={strokeWidth}
/>
</svg>
<Text>{modifier || score}</Text>
</Box>
);
};
export default GradientProgress;

Answer 1

You can achieve this by converting your circle to a mask and assign it to a foreignObject, this object contains a div with the conic-gradient style.
Here is an example how it works:
const control = document.getElementById('control');
const circle = document.getElementsByClassName('circle')[0];
const bg = document.getElementsByClassName('bg')[0];
control.addEventListener('input', function(event) {
circle.style.setProperty('--progress', event.target.valueAsNumber);
const deg = (event.target.valueAsNumber/100) * 360;
bg.style.setProperty('background', `conic-gradient(#00bcd4, #ffeb3b ${deg}deg)`);
});
.root {
width: 400px;
height: 400px;
text-align: center;
}
svg {
}
.circle {
stroke: white;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: calc((2 * 3.14) * 45);
stroke-dashoffset: calc((2 * 3.14 * 45) * (1 - calc(var(--progress, 50) / 100)));
transform-origin: 50% 50%;
transform: rotate(-87deg);
}
.bg {
background: conic-gradient(#00bcd4, #ffeb3b 180deg);
width: 100%;
height: 100%;
}
<div class='wrap'>
<div class='root'>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask">
<circle class='circle' cx="50" cy="50" r="45" stroke='white' stroke-width='3' fill='none' />
</mask>
</defs>
<foreignObject x="0" y="0" width="100" height="100" mask="url(#mask)">
<div class='bg'></div>
</foreignObject>
</svg>
<input id="control" type="range" value="60" />
</div>
</div>