@keyframes spin {
  0% { rotate: 0; }
  100% { rotate: 360deg; }
}

@property --color {
  syntax: '<color>';
  initial-value: #000;
  inherits: false;
}

body {
  --color: #fff;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle, #000 10vmin, #0000 0),
    repeating-conic-gradient(var(--color) 0 1%, #000 0 2%);
  transition: --color 1s;
  
  &:hover {
    --color: #000;
  }
  
  &::before {
    content: "";
    width: 90vmin;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    outline: 1px solid red;
    background:
      radial-gradient(farthest-side, #0000 77%, #ff3 0 85%, #0000 0 90%, #00e 0 98%, #0000 0);
    mask: conic-gradient(#000 2%, #0000 0);
    animation: spin 20s linear infinite;
  }
}