The page I am working on contains a certain gradient that consists of seven colors. The colors in the gradient should go one after another radially, not in a linear way. The circle should be filled with the gradient based on a number from 1 to 100 (including floats) that represents a percentage of a circle that is filled. The number is sent dynamically by the backend and is a student GPA score. I know that there were similar question here already. Like this one or this one. They differ from mine on one key aspect - I have to fill the element dynamically and I count the circumference of the circle element, so I cannot use multiple paths. And also this cannot just be a linear gradient, otherwise I would've done this already. Also I don't know how to use d3.js or anything like that.
Please help me, the task is due tomorrow.
const circle = document.querySelector(".progress-ring__circle");
const radius = circle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
circle.style.strokeDashoffset = offset;
};
setProgress(75);.progress-ring__circle {
transform-origin: center;
transform: rotate(-90deg);
transition: stroke-dashoffset 0.3s;
} <svg class="progress-ring" width="90" height="90">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="green" />
<stop offset="95%" stop-color="gold" />
</linearGradient>
</defs>
<circle
class="progress-ring__circle"
stroke="url(#MyGradient)"
stroke-width="10"
cx="45"
cy="45"
r="30"
fill="none"
/>
</svg>