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>
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>