HTML SVG reduce circle size-CodePudding

I have found animated circle made with svg but I need to reduce the circle size

How can I modify the code please?

@keyframes dash {
  from {
    stroke-dashoffset: 816;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.progress-circle path {
  stroke-dasharray: 816;
  stroke-dashoffset: 0;
  animation: dash 2s linear;
  animation-delay: 0.3s;
}

<svg  width="70" height="70">
  <path 
    d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"
    stroke="#000" stroke-width="1" fill="transparent" />
</svg>

CodePudding user response：

You need to change the width and height and then add the viewbox atrribute with the original size:

@keyframes dash {
  from {
    stroke-dashoffset: 816;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.progress-circle path {
  stroke-dasharray: 816;
  stroke-dashoffset: 0;
  animation: dash 2s linear;
  animation-delay: 0.3s;
}

<svg  width="30" height="30" viewBox="0 0 70 70">
    <path
        d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"
        stroke="#000" stroke-width="1" fill="transparent" />
</svg>

CodePudding user response：

add viewBox= "0 0 50 50" in svg tag and reduce svgwidth and height