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

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

CodePudding user response：

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

CodePudding user response：

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.