Reduce ring size with smoke animations

byMR

March 14, 2022

I found one beautiful ring with smoke animation, but I can’t fully understand it.

I want to change the size of this ring, let’s say 80px. Also, so that only one given color remains here.

I tried to just reduce the pixels, but then everything generally breaks down.

How can I reduce the size of this ring and have only one color? Help me please.

body {
  background: #111;
}
.circle {
  position: relative;
  height: 500px;
  width: 500px;
  filter: url(#wave);
}
.circle::before {
  content: "";
  position: absolute;
  top: 100px;
  left: 100px;
  right: 100px;
  bottom: 100px;
  border: 10px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 50px #fff, inset 0 0 50px #fff;
  filter: url(#wave) blur(10px);
  animation: anim 4s linear infinite;
}

@keyframes anim {
  0% {
    box-shadow: 0 0 50px #fff, inset 0 0 50px #fff;
  }
  20% {
    box-shadow: 0 0 50px #f00, inset 0 0 50px #f00;
  }
  40% {
    box-shadow: 0 0 50px #ff0, inset 0 0 50px #ff0;
  }
  60% {
    box-shadow: 0 0 50px #0ff, inset 0 0 50px #0ff;
  }
  80% {
    box-shadow: 0 0 50px #f0f, inset 0 0 50px #f0f;
  }
}

svg {
  display: none;
}

<div class="circle"></div>

<svg>
  <filter id="wave">
    <feTurbulence x="0" y="0" baseFrequency="0.009" numOctaves="5" seed="2">
      <animate attributeName="baseFrequency" dur="30s" values="0.02;0.005;0.02" repeatCount="indefinite" />
    </feTurbulence>
    <feDisplacementMap in="SourceGraphic" scale="30" />
  </filter>
</svg>

>Solution :

I have editted your snippet to suit your needs.
Note:
because this effect uses a #wave, resizing it by setting the height and width property will ruin the effect, because #wave is not resized.
you can instead use transform: scale(0.625) to adjust the scale.

body {
  background: #111;
}
.circle {
  position: relative;
  height: 500px;
  width: 500px;
  filter: url(#wave);
  transform: scale(0.625) /* add this to adjust the scale */
}
.circle::before {
  content: "";
  position: absolute;
  top: 100px;
  left: 100px;
  right: 100px;
  bottom: 100px;
  border: 10px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 50px red, inset 0 0 50px red; /* change red with your desired color */
  filter: url(#wave) blur(10px);
}

/* remove the keyframe animation so the color stays static */

svg {
  display: none;
}

<div class="circle"></div>

<svg>
  <filter id="wave">
    <feTurbulence x="0" y="0" baseFrequency="0.009" numOctaves="5" seed="2">
      <animate attributeName="baseFrequency" dur="30s" values="0.02;0.005;0.02" repeatCount="indefinite" />
    </feTurbulence>
    <feDisplacementMap in="SourceGraphic" scale="30" />
  </filter>
</svg>