.circle {
  position: absolute;
  width: 65%;
  aspect-ratio: 1;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(calc(-1 * min(20vw, 250px))) translateY(calc(-1 * min(20vh, 250px)));
  box-shadow: none;
}

.circle i {
  position: absolute;
  inset: 0;
  border: 2px solid white;
  transition: 0.5s;
}

.circle i:nth-child(1) {
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  animation: animate1 21s linear infinite;
}

.circle i:nth-child(2) {
  border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  animation: animate2 17s linear infinite;
}

.circle i:nth-child(3) {
  border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  animation: animate3 20s linear infinite;
}

.circle i:nth-child(4) {
  border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  animation: animate4 24s linear infinite;
}

.circle i:nth-child(5) {
  border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  animation: animate5 15s linear infinite;
}

.circle i {
  border: 6px solid var(--ring-color);
  filter: drop-shadow(0 0 20px var(--ring-color));
}

.circle i:nth-child(1) {
  --ring-color: #949494;
}

.circle i:nth-child(2) {
  --ring-color: #5facff;
}

.circle i:nth-child(3) {
  --ring-color: #c34df1;
}

.circle i:nth-child(4) {
  --ring-color: #ff7fff;
}

.circle i:nth-child(5) {
  --ring-color: #5effd8;
}

@keyframes animate1 {
  0% {
    transform: translateX(-26.4px) translateY(-22px) rotate(0deg);
  }
  100% {
    transform: translateX(-26.4px) translateY(-22px) rotate(360deg);
  }
}

@keyframes animate2 {
  0% {
    transform: translateX(-13.2px) translateY(4.5px) rotate(360deg);
  }
  100% {
    transform: translateX(-13.2px) translateY(4.5px) rotate(0deg);
  }
}

@keyframes animate3 {
  0% {
    transform: translateX(-45.2px) translateY(4.6px) rotate(0deg);
  }
  100% {
    transform: translateX(-45.2px) translateY(4.6px) rotate(360deg);
  }
}

@keyframes animate4 {
  0% {
    transform: translateX(-38.2px) translateY(-15.7px) rotate(360deg);
  }
  100% {
    transform: translateX(-38.2px) translateY(-15.7px) rotate(0deg);
  }
}

@keyframes animate5 {
  0% {
    transform: translateX(-17.6px) translateY(-15.3px) rotate(0deg);
  }
  100% {
    transform: translateX(-17.6px) translateY(-15.3px) rotate(360deg);
  }
}