<input type="checkbox" name="playPause" id="playPause">

<div class="scene">
  <div class="slice1 facet"></div><div class="slice1 facet"></div><div class="slice1 facet"></div><div class="slice1 facet"></div><div class="slice1 facet"></div><div class="slice2 facet"></div><div class="slice2 facet"></div><div class="slice2 facet"></div><div class="slice2 facet"></div><div class="slice2 facet"></div><div class="slice3 facet"></div><div class="slice3 facet"></div><div class="slice3 facet"></div><div class="slice3 facet"></div><div class="slice3 facet"></div><div class="slice4 facet"></div><div class="slice4 facet"></div><div class="slice4 facet"></div><div class="slice4 facet"></div><div class="slice4 facet"></div><div class="slice5 facet"></div><div class="slice5 facet"></div><div class="slice5 facet"></div><div class="slice5 facet"></div><div class="slice5 facet"></div><div class="slice6 facet"></div><div class="slice6 facet"></div><div class="slice6 facet"></div><div class="slice6 facet"></div><div class="slice6 facet"></div><div class="slice7 facet"></div><div class="slice7 facet"></div><div class="slice7 facet"></div><div class="slice7 facet"></div><div class="slice7 facet"></div><div class="slice8 facet"></div><div class="slice8 facet"></div><div class="slice8 facet"></div><div class="slice8 facet"></div><div class="slice8 facet"></div><div class="slice9 facet"></div><div class="slice9 facet"></div><div class="slice9 facet"></div><div class="slice9 facet"></div><div class="slice9 facet"></div><div class="slice10 facet"></div><div class="slice10 facet"></div><div class="slice10 facet"></div><div class="slice10 facet"></div><div class="slice10 facet"></div><div class="slice11 facet"></div><div class="slice11 facet"></div><div class="slice11 facet"></div><div class="slice11 facet"></div><div class="slice11 facet"></div><div class="slice12 facet"></div><div class="slice12 facet"></div><div class="slice12 facet"></div><div class="slice12 facet"></div><div class="slice12 facet"></div></div> <!-- end of .scene -->


<label for="playPause" title="Let the fish PLAY!"></label>

body {
  height: 100vh;
  background-color: #000;
  font-size: .9vmin;
  display: grid;
  margin: 0;
}

.scene, .scene *, nav {
  position: absolute;
}

.scene * {
  transform-style: preserve-3d;
}

.scene {
  width: 100em;
  aspect-ratio: 1;
  place-self: center;
  perspective: 150em;
  overflow: hidden;
  padding: 10em;
  display: grid;
}

.facet {
  place-self: center;
  --angle: 60deg;
  height: calc(tan(15deg)*50em);
  aspect-ratio: calc(1/cos(15deg));
  background-image: radial-gradient(at 80% 20%, #fff 5%, #ff0 0, #00f 10%, #000 0), conic-gradient(from 90deg at 0 0, hsl(calc(60*(var(--fStep) + var(--sStep))) 100% 50%), hsl(calc(60*(var(--fStep) + var(--sStep) + 1)) 100% 50%), hsl(calc(60*(var(--fStep) + var(--sStep) + 2)) 100% 50%) 90deg), conic-gradient(from calc(var(--gradTilt)*-90deg) at calc(var(--gradTilt)*100%) 100%, hsl(calc(60*(var(--fStep) + var(--sStep))) 100% 50%), hsl(calc(60*(var(--fStep) + var(--sStep) + 1)) 100% 50%), hsl(calc(60*(var(--fStep) + var(--sStep) + 2)) 100% 50%) 135deg);
  transform: rotateY(calc(var(--sStep)*30deg)) rotateX(calc(-1*30deg*var(--fStep) + 90deg - 30deg )) translateZ(50em) rotate(45deg);
  background-blend-mode: difference;
  mix-blend-mode: difference;
  animation: spin 18s linear infinite;
}

.facet::before {
  content: '';
  position: absolute;
  width: 40%;
  aspect-ratio: 1;
  right: 100%;
  top: 100%;
  background-image: repeating-conic-gradient(at 100% 0, black 0, transparent 15deg), conic-gradient(from 180deg at 100% 0, hsl(calc(60*(var(--fStep) + var(--sStep))) 100% 50%), hsl(calc(60*(var(--fStep) + var(--sStep) - 3.5)) 100% 50%) 90deg);
  -webkit-mask-image: linear-gradient(45deg, transparent 50%, black 0);
  mask-image: linear-gradient(45deg, transparent 50%, black 0);
  animation: fan 1.5s ease-in-out infinite alternate;
  transform-origin: 100% 0;
}

@keyframes fan {
  0% {
    rotate: y -45deg;
  }
  100% {
    rotate: y 45deg;
  }
}

.facet:nth-child(odd) {
  --gradTilt: 0;
}

.facet:nth-child(2n) {
  --gradTilt: 1;
}

@keyframes spin {
  100% {
    rotate: y 1turn;
  }
}

/* GUI layout */

input {
  display: none;
}

label {
  display: block;
  width: min(30em, 108px);
  aspect-ratio: 1;
  position: relative;
  transition: .3s ease-out;
  margin: min(10em, 30px);
  perspective: 0;
  perspective-origin: 100% 66%;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 60% 66%, 60% 66%, 100% 66%, 100% 100%, 0 100%);
}

label::before, label::after {
  content: '';
  position: absolute;
  inset: 0;
}

label::before {
  background: linear-gradient(#0bf, #00f, #004 95%, #0ff);
  transform-origin: left;
  rotate: y 18deg;
  transition: inherit;
}

label::after {
  background-image: radial-gradient(at 33% 50%, #000 6%, #f00 0 15%, #000 0, #0000 20%);
}

label:hover {
  clip-path: polygon(0 0, 100% 0, 100% 56%, 60% 66%, 60% 66%, 100% 76%, 100% 100%, 0 100%);
}

/* on/off switches */

#playPause:not(:checked) ~ .scene .facet,
#playPause:not(:checked) ~ .scene .facet::before {
  animation-play-state: paused;
}

#playPause:checked ~ label {
  rotate: -90deg;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0% 33%, 0% 66%, 100% 66%, 100% 100%, 0 100%);
}

#playPause:checked ~ label::before {
  rotate: y 0deg;
}

/* iteration */

.slice1 {
  --sStep: 0;
}

.slice2 {
  --sStep: 1;
}

.slice3 {
  --sStep: 2;
}

.slice4 {
  --sStep: 3;
}

.slice5 {
  --sStep: 4;
}

.slice6 {
  --sStep: 5;
}

.slice7 {
  --sStep: 6;
}

.slice8 {
  --sStep: 7;
}

.slice9 {
  --sStep: 8;
}

.slice10 {
  --sStep: 9;
}

.slice11 {
  --sStep: 10;
}

.slice12 {
  --sStep: 11;
}

.facet:nth-child(5n+1) {
  --fStep: 1;
}

.facet:nth-child(5n+2) {
  --fStep: 2;
}

.facet:nth-child(5n+3) {
  --fStep: 3;
}