svg dashed line circle animate so it rotates

Question

I have an SVG that looks like this,

<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
    <g fill="none" stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4"> 
        <circle cx="565" cy="565" r="565" stroke="none"/>
        <circle cx="565" cy="565" r="564"/>
    </g>
</svg>

I want to give the impression that the this circle is spinning clockwise I can not for the life of me figure it out, I have in the past done stroke animation where one stroke gets painted one after the other so the svg looks like it's being drawn, but I have never animated the rotation of an svg.

https://stackoverflow.com/questions/15138801/rotate-rectangle-around-its-own-center-in-svg — Paulie_D, Dec 14 '21 at 19:19

score 1 · Answer 1 · answered Dec 14 '21 at 20:25

Or with SMIL:

<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
    <g fill="none" 
       stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4"> 
        <circle cx="565" cy="565" r="565" stroke="none"/>
        <circle cx="565" cy="565" r="564"/>
        <animateTransform attributeName="transform"
                          type="rotate"
                          from="360 565 565"
                          to="0 565 565"
                          dur="4.1s"
                          repeatCount="indefinite"/>
    </g>
</svg>

score 0 · Answer 2 · answered Dec 14 '21 at 19:21

You can try setting an animation in which it starts at 360deg and works to -360deg to get the clockwise rotation. See the example below.

@keyframes rotation {
    0%{ transform: rotate(360deg); }
    100%{ transform: rotate(-360deg); }
}
svg {
  animation: rotation 5s linear infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" width="1130" height="1130">
    <g fill="none" stroke="#1864ab" stroke-width="2" stroke-dasharray="4" opacity=".4"> 
        <circle cx="565" cy="565" r="565" stroke="none"/>
        <circle cx="565" cy="565" r="564"/>
    </g>
</svg>

svg dashed line circle animate so it rotates

2 Answers2