Search code examples
svgsvg-animate

How to increase the stroke height of spinning circle SVG (How to make it thicker)


I am trying to increase the thickness of this spinning SVG circle. I don't know if it's stroke height or something. I've tried all I can but seems the SVG editor in site doesn't include the option to increase thickness or stroke height of a stroke. Any idea will be appreciated!

svg {
  background:beige;
  Zoom: 4;
}
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
   <path fill="black" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z">
   <animateTransform attributeName="transform" dur="2.25s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/>
   </path>
</svg>


Solution

  • To increase the thickness of the spinning SVG circle, you need to modify the stroke and stroke-width properties within the SVG:

    svg {
      background:beige;
      Zoom: 4;
    }
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
      <path fill="black" stroke="blue" stroke-width="2" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z">
        <animateTransform attributeName="transform" dur="2.25s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/>
      </path>
    </svg>