我发现了一个带有烟雾动画的漂亮戒指，但我不能完全理解它.
我想改变这个戒指的尺寸，比如说80px.而且，这里只剩下一种给定的 colored颜色 .
我试着减少像素，但后来一切都崩溃了.
我怎样才能缩小这枚戒指的尺寸，只使用一种 colored颜色 ？请帮帮我.
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>