How can I make it dynamic svg circle?

First of all, a bit of trigonometry ( courtesy of Paul Dixon ): to obtain the point inside a circumference from a certain angle, you must apply the following formula:

x = cx + r * cos(a)
y = cy + r * sin(a)

where cxy cyare the coordinates of the center of the circle, ris the radius, and ais the angle you want expressed in radians. We are going to use that to calculate the destination position of the arc that we are going to create.

And you also have to take another important part into account: the angle starts counting from the X axis (as indicated in the following graphic), while the percentage you want to show starts counting from the Y axis. So you're going to have to correct the angle π/2 radians:

Taking this into account, to calculate the destination point of the arc, the calculations that will have to be done will be like this (it can be simplified, but I have left it like this so that the correction can be seen better and already in radians):

x = cx + r * cos( 2π * porcentaje - π/2 );
y = cy + r * sin( 2π * percentaje - π/2 );

And now the fun part: the value that is going to go inside dthe pathone you want the percentage to represent. It would be something like this:

M <cx>,<cy> L<cx>,<cx - r> A <r>,<r> <modificador de arco> <x>,<y> Z

Where:

• <cx>: is the X coordinate of the center of the circumference
• <cy>: is the Y coordinate of the center of the circumference
• <r>: is the radius of the circle
• <modificador de arco>: this will be the three digits (with values ​​0 or 1), which will depend on the value of the angle: if it is more than 180 it will be "0 1.1" and if it is not it will be "1 0.1". ( Daniel Pataki has a very good post in English, in which he explains it better while teaching how to create a graph).
• <x>: is the value xyou calculated with the formulas above.
• <y>: is the value yyou calculated with the formulas above.

From there it can be deduced that it <cx - r>is the X coordinate of the center of the circumference minus the radius.

After explaining what each thing is, I'm going to put a description of what it does. To do this, I am going to assume that the image is a 240x240 square, the circumference has a radius of 100 with the center at 120.120, and that we want to represent a 20% whose coordinates are 215.1056.89.0983. He dwould then be:

M120,120 L120,20 A100,100 1 0,1 215.1056,89.0983 Z

This is what it does:

1. It is located at position 120,120 (without drawing anything)
2. Draw a line to 120.20
3. From the current position, draw an arc to 215.1056.89.0983
4. Close the arc (drawing a line from the current point to the original 120,120)

I hope it helps to better understand what is being done.

Here is an example with the code working:

function circlePath(cx, cy, r, percentil){
  
  var coordx = cx + r * Math.cos( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
  var coordy = cy + r * Math.sin( 2 * Math.PI * percentil / 100 - Math.PI / 2 );
  var modif = percentil >= 50 ? "0 1,1" : " 1 0,1";
  var variables = "M" + cx + "," + cy + " L" + cx +"," + (cx - r) + " A" + r + "," + r + " " + modif + " " + coordx + ", " + coordy + " Z";
  
  var pathEl = document.getElementById("porcentaje");
  pathEl.setAttribute("d", variables);
  pathEl.setAttribute("fill", "red");
  
  document.getElementById("porcentaje-texto").innerHTML = percentil + "%";
}

circlePath(120,120,120, 75);

<svg class="circulo" width="240" height="240" viewBox="0 0 240 240">
  <circle cx="120" cy="120" r="120" fill="#ebeced"></circle>
  <path id="porcentaje" d="" fill="#58d6a6"></path>
  <circle cx="120" cy="120" r="100" fill="#ffffff"></circle>
  <text id="porcentaje-texto" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" fill="black" stroke="none" style="font-size:40px">0%</text>
</svg>

<hr/>

<button onclick="circlePath(120,120,120,10)">10%</button>
<button onclick="circlePath(120,120,120,20)">20%</button>
<button onclick="circlePath(120,120,120,30)">30%</button>
<button onclick="circlePath(120,120,120,40)">40%</button>
<button onclick="circlePath(120,120,120,50)">50%</button>
<button onclick="circlePath(120,120,120,60)">60%</button>
<button onclick="circlePath(120,120,120,70)">70%</button>
<button onclick="circlePath(120,120,120,80)">80%</button>
<button onclick="circlePath(120,120,120,90)">90%</button>

Note: I have cheated a bit and the code fails for the 100% percentage. You could add a little condition for that case where the circle is painted red instead of calculating arcs and such.

You could also solve it using:

• stroke-dasharray: which allows us to specify the length of the script.

• stroke-dashoffset: which allows us to specify how much to subtract from the length of the script.

• transition: which allows us to define the transition between two states of an element.

• transform: which allows us, using rotate, to rotate the circle and position the start of the bar at the top.

So we have to:

• The radius ( r) of the circle is 90.

• The formula to calculate the perimeter ( P) of a circumference:2π * r

  P = 2π * r
  P = 2π * 90
  P = 565.48
  

• We set stroke-dasharrayequal to 565.48, which is the perimeter ( P).

• We set stroke-dashoffsetequal to 0(do not subtract anything), which generates a hyphen of 100%the established length.

• If we wanted to generate a dash from the 30%( x) of the perimeter of the circumference, we would have to calculate how much to subtract from the length of the dash:

  offset = P * (100 - x) / 100
  offset = 565.48 * (100 - 30) / 100
  offset = 395.836
  

demonstration:

function getCirclePerimeter() {
  var radius = parseInt(circle.getAttribute('r'), 10);
  return 2 * Math.PI * radius;
}

var cont = document.getElementById('cont');
var bg = document.getElementById('bg');
var circle = document.getElementById('bar');
var percent = document.getElementById('percent');

// Inicializamos
bg.style.strokeDasharray = 
  circle.style.strokeDasharray = getCirclePerimeter();
cont.setAttribute('data-pct', percent.value);

percent.addEventListener('input', function() {
  var percent = parseInt(this.value, 10),
    perimeter = getCirclePerimeter();
  
  // Validamos el valor ingresado
  if (isNaN(percent) || percent > 100) {
    percent = 100;
  } else if (percent < 0) {
    percent = 0;
  }
  this.value = percent;
    
  // Calculamos cuanto restar!
  var offset = perimeter * (100 - percent) / 100;
  circle.style.strokeDashoffset = offset;
  cont.setAttribute('data-pct', percent);
});

.percent {
  position: absolute;
}
#svg circle {
  fill: transparent;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .2s linear;
  stroke: #ebeced;
  stroke-width: 20px;
}
#svg #bar {
  stroke: #58d6a6;
}
#cont {
  height: 200px;
  width: 200px;
  margin: 10px auto;
  position: relative;
}
#cont:after {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: attr(data-pct)"%";
  font-size: 32px;
  color: #58d6a6;
}

<label class="percent">
  <input id="percent" name="percent" value="100" type="number" min="0" max="100" size="1"/>%
</label>
<div id="cont">
  <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle id="bg" r="90" cx="100" cy="100"></circle>
    <circle id="bar" r="90" cx="100" cy="100" transform="rotate(-90 100 100)" id="bar"></circle>
  </svg>
</div>