5

I'm learning how to code/create SVG's and currently working on a loading indicator. The concept is simple; a circle, moving around in a circle.

However, I'd like to make the motion look more realistic by adding a blur to the moving circle (essentially creating a blurred tail). I've searched and found that you can motion blur in the x or y direction, but that wouldn't achieve the desired effect since my circle is constantly switching between x and y. I've also tried to fake it by adding lower opacity, progressively smaller circles to the back of my circle but that looks pretty bad if the image is large. I know I could instead make a path instead of a circle with a fill gradient that mimics the blur but I'm curious, what is the best/standard way to achieve this motion blur effect?

WiseOlMan
  • 926
  • 2
  • 11
  • 26
  • Please create an [MCVE](http://stackoverflow.com/help/mcve) with what you have now. The correct solution may depend on the relative sizes of the moving circle and it's path. – Paul LeBeau Apr 21 '16 at 18:37
  • Here's what I have so far...[CodePen](http://codepen.io/WiseOlMan/pen/GZBypK) – WiseOlMan Apr 22 '16 at 17:45

1 Answers1

6

Well you can do something like this, which adds a directional blur and erodes it a little, the existing transform that you have takes care of rotating it appropriately

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>
Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • 1
    Is there any workaround to make this tail longer so the moving circle will look like a comet? – Ameer Mousavi May 15 '19 at 11:11
  • feMorphology is a bit buggy in Chrome when you put it in an animation - so you can't add multiple layers within the filter with this method - it produces artifacts. I would recommend drawing a tail explicitly in the content and using a simple filter to blur it. – Michael Mullany Mar 17 '22 at 13:52