How to add blurred tail of movement to svg element going in a circle?

Question

I am learning how to encode / create SVG and currently work with progress bar. The concept is simple; circle moving in a circle.

However, I would like to make the movement more realistic by adding blur to the moving circle (essentially creating a blurry tail). I searched and found that you can blur the movement in the x or y direction, but this will not produce the desired effect, as my circle constantly switches between x and y. I also tried to fake it by adding lower opacity, gradually reducing the circles at the back of my circle, but it looks pretty bad if the image is large. I know that instead I could make a path instead of a circle with a fill gradient that simulates blur, but I'm curious what is the best / standard way to achieve this motion blur effect?

Answer 1

, - , , , , .

svg {
  max-width:500px
}

svg .cls-1 {
  fill: #F00;
}

svg .white {
  fill: white;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <title>Test</title>
  <defs>
    <filter id="directional-blur" x="-50%" width="200%">
      <feGaussianBlur stdDeviation="3 0"/>
      <feOffset dx="-2"/>
      <feMorphology operator="erode" radius="1"/>
      <feComposite operator="over" in="SourceGraphic"/>
    </filter>
  </defs>
      <circle filter="url(#directional-blur)" class="cls-1" cx="50" cy="22" r="12" >
        <animateTransform attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="0 50 50"
        to="360 50 50"
        dur="2s"
        repeatCount="indefinite" />
      </circle>  
</svg>

Hide result

Answer 2

, , ?