'how to apply transition to arc increase in svg

I am trying to apply a transition effect to an svg I have, but I am not sure how to do this. Basically I would like to apply transition: width 2s ease; when I increase the arc size in the following code:

script:

    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = "0";
    if (endAngle >= startAngle) {
      largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
    } else {
      largeArcFlag = (endAngle + 360.0) - startAngle <= 180 ? "0" : "1";
    }

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

function inc() {
  cc += 30;
  if (cc > 355)
    {
      cc = 1;
    }
  document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, cc));
}
var cc = 0;
window.onload = function() {
  document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 5));
  document.getElementById("arc2").setAttribute("d", describeArc(150, 150, 70, 180, 10));
};

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <svg>
<path id="arc1" fill="none" stroke="pink" stroke-width="20" />
<path id="arc2" fill="none" stroke="#446688" stroke-width="20" />
  </svg>
  
  <button onClick=inc()>++</button>
</body>
</html>

How can I get the attribute d to apply that transition? Or is there another way to achieve the same effect?

Thank you!

Here's the example: https://jsbin.com/jatavoyova/edit?html,js,output

Solution 1:^[1]

No need to calculate arcs if you use pathLength:

Click or Ctrl+Click

<arcs style="display:grid;grid:1fr/repeat(3,150px)">
  <svg-arc size="1"></svg-arc>
  <svg-arc size="3" stroke="green"></svg-arc>
  <svg-arc size="6" stroke="blue"></svg-arc>
</arcs>

<script>
  customElements.define("svg-arc", class extends HTMLElement {
    connectedCallback() {
      this.render();
      this.onclick = (evt) => {
        let offset = evt.ctrlKey ? -1 : 1;
        this.setAttribute("size", ~~this.getAttribute("size") + offset);
        this.render();
      }
    }
    render() {
      let size = this.getAttribute("size") || 1;
      let stroke = this.getAttribute("stroke") || "red";
      this.innerHTML = `<svg viewBox="0 0 50 50">
               <text x="20" y="30">${size}</text>
               <circle cx="25" cy="25" r="20" 
                       stroke="${stroke}" stroke-width="10" fill="none"
                       pathLength="10"
                       transform="rotate(-90 25 25)"
                       stroke-dasharray="${size} ${10-size}"/></svg>`;
    }
  });
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'how to apply transition to arc increase in svg

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]