Spinner by Nawsome

@Nawsome

Theme:

Light#e8e8e8

Nov 10, 2022164 views

CSSAdd prefixes

1.circle {
2  animation: move571 4s linear infinite;
3}
4
5.circle.right {
6  animation-direction: reverse;
7}
8
9@keyframes move571 {
10  25% {
11    transform: translateX(-32px);
12  }
13
14  75% {
15    transform: translateX(32px);
16  }
17}

.circle {
  animation: move571 4s linear infinite;
}

.circle.right {
  animation-direction: reverse;
}

@keyframes move571 {
  25% {
    transform: translateX(-32px);
  }

  75% {
    transform: translateX(32px);
  }
}

HTML

1<svg height="0" width="0">
2    <defs>
3        <filter color-interpolation-filters="sRGB" height="200%" y="-50%" width="200%" x="-50%" id="goo">
4            <feGaussianBlur result="blur" stdDeviation="8" in="SourceGraphic"></feGaussianBlur>
5            <feColorMatrix result="cm" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7" mode="matrix" in="blur"></feColorMatrix>
6        </filter>
7    </defs>
8</svg>
9
10<svg height="180" width="320" viewBox="0 0 320 180">
11    <g filter="url(#goo)">
12        <circle cy="90" cx="160" r="24" fill="#275EFE" class="circle"></circle>
13        <circle cy="90" cx="160" r="24" fill="#275EFE" class="circle right"></circle>
14    </g>
15</svg>

<svg height="0" width="0">
    <defs>
        <filter color-interpolation-filters="sRGB" height="200%" y="-50%" width="200%" x="-50%" id="goo">
            <feGaussianBlur result="blur" stdDeviation="8" in="SourceGraphic"></feGaussianBlur>
            <feColorMatrix result="cm" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7" mode="matrix" in="blur"></feColorMatrix>
        </filter>
    </defs>
</svg>

<svg height="180" width="320" viewBox="0 0 320 180">
    <g filter="url(#goo)">
        <circle cy="90" cx="160" r="24" fill="#275EFE" class="circle"></circle>
        <circle cy="90" cx="160" r="24" fill="#275EFE" class="circle right"></circle>
    </g>
</svg>