.ac .a {
  background-color: hsl(calc(var(--a) * 10deg), 75%, calc(var(--l) * 6% + 15%));
}

.cont {
  animation: rot-cont 10s linear infinite forwards;
}
.cont:before, .cont:after {
  content: "";
  position: absolute;
  width: 10vmin;
  aspect-ratio: 1;
  border-radius: 100vmax;
}
.cont:before {
  background-color: white;
  background-image: conic-gradient(from 200deg, #f2a6a6 0deg, #f2a6b3 10deg, #f2a6bf 20deg, #f2a6cc 30deg, #f2a6d9 40deg, #f2a6e6 50deg, #f2a6f2 60deg, #e6a6f2 70deg, #d9a6f2 80deg, #cca6f2 90deg, #bfa6f2 100deg, #b3a6f2 110deg, #a6a6f2 120deg, #a6b3f2 130deg, #a6bff2 140deg, #a6ccf2 150deg, #a6d9f2 160deg, #a6e6f2 170deg, #a6f2f2 180deg, #a6f2e6 190deg, #a6f2d9 200deg, #a6f2cc 210deg, #a6f2bf 220deg, #a6f2b3 230deg, #a6f2a6 240deg, #b3f2a6 250deg, #bff2a6 260deg, #ccf2a6 270deg, #d9f2a6 280deg, #e6f2a6 290deg, #f2f2a6 300deg, #f2e6a6 310deg, #f2d9a6 320deg, #f2cca6 330deg, #f2bfa6 340deg, #f2b3a6 350deg, #f2a6a6 360deg);
  transform: translate(-50%, -75%) rotatex(90deg) translateZ(20vmin);
}
.cont:after {
  background-color: #382e2e;
  background-image: conic-gradient(from -30deg, #590d0d 0deg, #591a0d 10deg, #59260d 20deg, #59330d 30deg, #59400d 40deg, #594d0d 50deg, #59590d 60deg, #4d590d 70deg, #40590d 80deg, #33590d 90deg, #26590d 100deg, #1a590d 110deg, #0d590d 120deg, #0d591a 130deg, #0d5926 140deg, #0d5933 150deg, #0d5940 160deg, #0d594d 170deg, #0d5959 180deg, #0d4d59 190deg, #0d4059 200deg, #0d3359 210deg, #0d2659 220deg, #0d1a59 230deg, #0d0d59 240deg, #1a0d59 250deg, #260d59 260deg, #330d59 270deg, #400d59 280deg, #4d0d59 290deg, #590d59 300deg, #590d4d 310deg, #590d40 320deg, #590d33 330deg, #590d26 340deg, #590d1a 350deg, #590d0d 360deg);
  transform: translate(-50%, -80%) rotatex(-90deg) translateZ(20vmin);
}

@keyframes rot-cont {
  from {
    transform: rotatex(0deg) rotatey(0deg) rotatez(0deg);
  }
  to {
    transform: rotatex(360deg) rotatey(360deg) rotatez(720deg);
  }
}
div {
  transform-style: preserve-3d;
  box-sizing: border-box;
}

.cont {
  position: relative;
  rotate: 3 1 0 90deg;
}
.cont .ac {
  position: absolute;
  width: 5vmin;
  height: 5.5vmin;
  transform: translate(-50%, -50%) rotatey(calc( var(--a) * 10deg));
}
.cont .a {
  --b: 5;
  --f: clamp(0,(var(--l) - var(--b))*1000,1);
  --x: ((var(--l) / var(--b))
      - var(--f));
  --d: calc(
    ((1 - var(--f)) * var(--x)
      + (var(--f) *
        ( (1 / var(--b)) +
          var(--f) - var(--x)
        )

      )
     )
    * var(--b));
  position: absolute;
  width: calc(var(--d) * 35%);
  height: 100%;
  transform: translate(-50%, -50%) rotatex(calc( var(--l) * 16deg - 90deg)) translateZ(20vmin);
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  background: rgba(255, 255, 255, 0);
}