Fill Percentage area in a custom Oval SVG image

Question

I would like to fill a custom SVG to a specific percentage.

Here is my initial SVG

Suppose there is a progress of x% so I would like to fill this SVG like

I am not able to figure out how to achieve this. I want it to be dynamic so that I can make it for any percentage.

Also, I need to animate it from the starting point to the endpoint in a circular motion.

Any help would be highly appreciatable.

user_7897395 · Answer

As I've commented:

You can calculate the length of the path using the getTotalLength() method. This represents 100%.

Next you can get the length representing the x% (xperc in the code).

Now you can use stroke-dasharray to represent the partial path.

You can calculate the position of the last point using the getPointAtLength() method.

Please read the comments in my code.

//the desired percentege
let xperc = .35;
//the total length of the path
let tl = base.getTotalLength();
//the partial length at the given percentage xperc
let partial = tl * xperc;

//set the stroke-dasharray of the second use element
perc.setAttribute("stroke-dasharray", `${partial} ${tl -partial}`)

//calculate the position of the point marking the end position
let theEnd = base.getPointAtLength(partial);
// set the cx and the cy attributes for the end point
end.setAttribute("cx", theEnd.x);
end.setAttribute("cy", theEnd.y);

circle {
  stroke: red;
  fill:white;
  stroke-width: 6.87634;
}

OBSERVATION: since your path goes counter clockwise I had to reverse the path to get the desired result

And this is an example where I'm using an input type range to change the percent value:

let xperc = itr.value;
onInput();


itr.addEventListener("input", onInput)

function onInput() {
  xperc = itr.value;
  
  let tl = base.getTotalLength();
  let partial = tl * xperc;

  perc.setAttribute("stroke-dasharray", `${partial} ${tl - partial}`);

  let theEnd = base.getPointAtLength(partial);

  end.setAttribute("cx", theEnd.x);
  end.setAttribute("cy", theEnd.y);
}

circle {
  stroke: red;
  fill:white;
  stroke-width: 6.87634;
}

And another demo where I'm using javascript to animate it from 0 to 1:

//the animation begins at 0
let xperc = 0;
//get the total length of the path
let tl = base.getTotalLength();
//the request animation id
let rid = null;



function Animation() {
  rid = window.requestAnimationFrame(Animation);
  // while xperc < 1 increase it's value by 0.001. Else stop the animation
  if (xperc < 1) {
    xperc += 0.001;
  }else{window.cancelAnimationFrame(rid)}

  //the same as in the first example
  let partial = tl * xperc;
  perc.setAttribute("stroke-dasharray", `${partial} ${tl - partial}`);

  let theEnd = base.getPointAtLength(partial);

  end.setAttribute("cx", theEnd.x);
  end.setAttribute("cy", theEnd.y);
}

Animation();

circle {
  stroke: red;
  fill:white;
  stroke-width: 6.87634;
}

Fill Percentage area in a custom Oval SVG image

1 Answers