Fix linear gradient of SVG circle - svg

Question

I have the following circle progress bar. Everything is fine except for the gradient. The circle is actually 2 arcs. And when the script draws the first arc the gradient is red->blue. So the start of the circle is red. And the tail is blue. But when the second arc is being drawn the start of the gradient switches to blue and I don't know how to fix it. I don't want it to switch colors. I want the gradient to always be the same
function update(percentage) {
var width = 160,
height = 160,
cx = width / 2,
cy = height / 2,
start_angle = 0,
barsize = 10;
var r = Math.min(cx, cy) - barsize / 2;
if (percentage === 100) {
percentage -= 0.0001;
}
var end_angle = start_angle + percentage * Math.PI * 2 / 100;
var x1 = cx + r * Math.sin(start_angle),
y1 = cy - r * Math.cos(start_angle),
x2 = cx + r * Math.sin(end_angle),
y2 = cy - r * Math.cos(end_angle);
// This is a flag for angles larger than than a half circle
// It is required by the SVG arc drawing component
var big = 0;
if (end_angle - start_angle > Math.PI) big = 1;
// This string holds the path details
var d = "M" + x1 + "," + y1 + // Start at (x1,y1)
" A" + r + "," + r + // Draw an arc of radius r
" 0 " + big + " 1 " + // Arc details...
x2 + "," + y2;
document.getElementById('path').setAttribute('d', d);
}
function animate(start, finish) {
setTimeout(function() {
update(start);
console.log(document.getElementsByClassName('progress__content'))
let element = document.getElementsByClassName('progress__content')[0];
element.textContent = start + '%';
start += 1;
if (start <= finish) {
animate(start, finish);
} else {
return;
}
}, 10);
}
function go() {
animate(0, 100);
}
.progress {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: 100px;
width: 200px;
height: 200px;
}
.progress__content {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -23px;
font-family: Helvetica;
font-size: 40px;
width: 103px;
height: 47px;
text-align: center;
}
body {
background: #f1f1f1;
}
<button onclick="go()">Click me</button>
<div class="progress clip-svg">
<div class="progress__content">0%</div>
<svg width="160" height="160">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop stop-color="#EE3028" offset="0" />
<stop stop-color="#067BC2" offset="1" />
</linearGradient>
</defs>
<ellipse rx="75" ry="75" cx="80" cy="80" stroke="#f2f2f2" fill="none" stroke-width="10"></ellipse>
<g>
<path id="path" stroke-width="10" stroke="url(#gradient)" fill="none" d="">
</path>
</g>
</svg>
</div>

Answer 1

The gradient changes because you define the gradient on the entire path, and as the path object grows down and left, the gradient stop positions are continuously redefined as well. The solution is to change your gradientUnits to userSpaceOnUse - so the gradient is defined vs. the drawing surface/viewBox vs. relative to the object. Possible implementation below (I'm not entirely sure what color scheme you're aiming for - but tweak the stop locations & colors until you have what you want).
function update(percentage) {
var width = 160,
height = 160,
cx = width / 2,
cy = height / 2,
start_angle = 0,
barsize = 10;
var r = Math.min(cx, cy) - barsize / 2;
if (percentage === 100) {
percentage -= 0.0001;
}
var end_angle = start_angle + percentage * Math.PI * 2 / 100;
var x1 = cx + r * Math.sin(start_angle),
y1 = cy - r * Math.cos(start_angle),
x2 = cx + r * Math.sin(end_angle),
y2 = cy - r * Math.cos(end_angle);
// This is a flag for angles larger than than a half circle
// It is required by the SVG arc drawing component
var big = 0;
if (end_angle - start_angle > Math.PI) big = 1;
// This string holds the path details
var d = "M" + x1 + "," + y1 + // Start at (x1,y1)
" A" + r + "," + r + // Draw an arc of radius r
" 0 " + big + " 1 " + // Arc details...
x2 + "," + y2;
document.getElementById('path').setAttribute('d', d);
}
function animate(start, finish) {
setTimeout(function() {
update(start);
console.log(document.getElementsByClassName('progress__content'))
let element = document.getElementsByClassName('progress__content')[0];
element.textContent = start + '%';
start += 1;
if (start <= finish) {
animate(start, finish);
} else {
return;
}
}, 10);
}
function go() {
animate(0, 100);
}
.progress {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: 100px;
width: 200px;
height: 200px;
}
.progress__content {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -23px;
font-family: Helvetica;
font-size: 40px;
width: 103px;
height: 47px;
text-align: center;
}
body {
background: #f1f1f1;
}
<button onclick="go()">Click me</button>
<div class="progress clip-svg">
<div class="progress__content">0%</div>
<svg width="160" height="160">
<defs>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="160" y2="0">
<stop stop-color="#EE3028" offset="0" />
<stop stop-color="#067BC2" offset="160" />
</linearGradient>
</defs>
<ellipse rx="75" ry="75" cx="80" cy="80" stroke="#f2f2f2" fill="none" stroke-width="10"></ellipse>
<g>
<path id="path" stroke-width="10" stroke="url(#gradient)" fill="none" d="">
</path>
</g>
</svg>
</div>