Circular progress indicator with a color gradient with SVGs?

Question

I need to make a circular progress indicator with a color gradient. I also need the \'ends\' of the progress circle to be rounded. This image has everything Im trying to ach

Answer 1

Instead of using a gradient you can give the illusion of a gradient by using 100 circles each with a different fill. I'm using the fill-opacity attribute to set the element either fully opaque or fully transparent.

I hope it helps.

const SVG_NS = 'http://www.w3.org/2000/svg';
const CIRCUMFERENCE = base.getTotalLength()
const UNIT = CIRCUMFERENCE / 100;
let circles=[];//the array of circles

//create 100 circles each with a different fill color to create the illusion of a gradient
for(let i = 0; i<100; i++){
  let pos = base.getPointAtLength(i*UNIT);
  let o = {cx:pos.x,cy:pos.y,r:5.5,'fill-opacity':0,fill:`hsl(220,100%,${50 + (100-i)/2}%)`}
  circles.push(drawCircle(o, progress__value));  
}

progress();

control.addEventListener('input', progress);

function progress(){
  let val = control.valueAsNumber;
  for(let i = 0; i

svg{border:solid}

.demo {
  flex-direction: column;
  display: flex;
  width: 120px;
}

.progress__meter{
    fill: none;
}

.progress__meter {
    stroke: grey;
}