Drawing Circular Path With Svg And Controlling Its Start / End

Is it possible to draw a circular path like this via svg paths in a way where it is possible to manipulate it to either be 100% (so full circle) or stop at 50%, so top to bottom f

Solution 1:

There are numerous examples of how to do this, here on Stack Overflow, and elsewhere on the web. But they all will use one of two methods to draw the progress bar:

1. Construct a <path> element using one or more path arc ('A') commands
2. Use a <circle> and use a dash pattern to draw part of a circle

The second one is the easier of the two to implement. Hopefully the example below is straightforward to follow:

function setProgress(percent)
{
  // Pointer to the <circle> element
  var progress = document.getElementById("progress");
  // Get the length of the circumference of the circle
  var circumference = progress.r.baseVal.value * 2 * Math.PI;
  // How long our stroke dash has to be to cover <percent> of the circumference?
  var dashLength = percent * circumference / 100;
  // Set the "stroke-dasharray" property of the cicle
  progress.style.strokeDasharray = dashLength + ' ' + circumference;
}

setProgress(55);

svg {
  width: 300px
}

#progress {
  fill: lightgrey;
  stroke: orange;
  stroke-width: 10;
}

<svg viewBox="-100 -100 200 200">
  <circle id="progress" r="80" transform="rotate(-90)"/>
</svg>

Solution 2:

i think you are approaching this problem in the wrong direction;

you should search on the internet for a circular progress bar, you will find tons of answers.

this is one link: https://kimmobrunfeldt.github.io/progressbar.js/