Rotating svg element looks like bouncing slightly - html

Question

I looked at the existing question related yo my query but could not get help.
I am Using basic animation of css3. Below is the fiddle..
https://jsfiddle.net/gamerVinod/d21c6bcb/5/
Below is the css
#keyframes rotate {
from {
transform: rotate(0deg);
transform-origin: center;
}
to {
transform: rotate(359deg);
transform-origin: center;
}
}
.rotate-element {
animation: rotate 1s infinite linear;
}
Whenever i use SVG and rotate it then it bounces slightly.
I am not able to find out whether it is due to SVG path or anything else.Can someone please let me know the reason of it and how to fix it?

Answer 1

As #Ouroborus said, bezier curves can only approximate circular arcs. If you need to rotate those shapes then, unless your shape is carefully and accurately crafted, you are likely to see some shimmy.
You could use the arc (A) path element instead. But you don't need to. By far the simplest solution here is to use an actual <circle>.
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.rotate-element {
animation: rotate 1s infinite linear;
}
.parent{
height: 200px;
width: 200px;
background: red;
display: flex;
align-items:center;
text-align: center;
}
.child{
height: 200px;
width: 200px;
}
<div class="parent">
<svg class="child rotate-element" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<circle cx="20" cy="20" r="13.25" opacity="0.2" fill="none"
stroke="#000" stroke-width="3"/>
<circle cx="20" cy="20" r="13.25" fill="none"
stroke="#000" stroke-width="3"
stroke-dasharray="6 80"/>
</svg>
</div>
Here I am using two circles with thick strokes (lines) and transparent fill. The one at the back is semi-transparent (like the original SVG). The one on top has only part of it's stroke drawn by using a dash array.