@keyframes spiral {

  0% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 10px);
  }

  5% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 12px);
  }

  10% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 14px);
  }

  15% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 16px);
  }

  20% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 18px);
  }
  
  25% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 20px);
  }

  30% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 22px);
  }

  35% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 24px);
  }

  40% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 26px);
  }

  45% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 28px);
  }

  50% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 30px);
  }

  55% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 32px);
  }

  60% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 34px);
  }

  65% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 36px);
  }

  70% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 38px);
  }

  75% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 40px);
  }
  
  80% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 42px);
  }

  85% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 44px);
  }

  90% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 46px);
  }

  95% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 48px);
  }

  100% {
    background: repeating-radial-gradient(circle at 50% 50%, #000 0, black 4px, var(--color-red) 4px, var(--color-red) 5px, #000 5px, black 50px);
  }

}