CSS animation: Why is my spinning circle wobbling? - css

Question

I'm trying to create a simple loading animation using SVG and CSS but for some reason the spinning circle is slightly wobbling. It's hardly noticeable but it's driving me crazy.
Here's a link to Codepen demonstrating the problem: https://codepen.io/signorbusi/pen/dyeJqmE
This is the code:
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#spinner {
animation-name: spin;
margin-top: 2rem;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: center center;
}
<div class="wrapper">
<svg id="spinner" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" stroke="black">
<circle r="23" cx="24" cy="24" stroke-width="2"/>
</svg>
</div>
Any pointers to how to get rid of the wobbling would be very helpful!

Answer 1

The viewbox of the <svg> element is cutting off the edges of the circle as it rotates. (Note that your stroke-width is increasing the size of the circle beyond the defined radius in the r attribute.)
If you expand the <svg> element's width and height attributes, match the viewbox attribute accordingly, and then also center the circle inside of that (using the cx and cy attributes on the <circle> element), it will not "wobble":
<div class="wrapper">
<svg id="spinner" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" stroke="black">
<circle r="23" cx="30" cy="30" stroke-width="2"/>
</svg>
</div>
Working Codepen can be found here: https://codepen.io/theodorewiersema/pen/NWMXowY

Answer 2

This should work:
<circle r="22" cx="24" cy="24" stroke-width="2"/>
I changed the radius attribute to 22 and it doesn't wobble.