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 ></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>
CodePudding user response:
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 ></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>