*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
body {
  background-color: #9cafb7;
  background-image: #fff;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 1200px;
  overflow: hidden;
}
body *:not(:empty) {
  transform-style: preserve-3d;
}
.ring {
  position: relative;
  animation: ring 20s infinite linear;
}
@keyframes ring {
  to {
      transform: rotateY(720deg) rotateX(360deg);
  }
}
.ring * {
  position: absolute;
}
.circle {
  font-size: 15px;
  width: 3em;
  height: 60em;
  transform: translateX(-50%) rotateZ(var(--rz)) translateY(11.25em) rotateX(90deg);
  animation: triangleTransform 4s var(--delay, 0s) infinite linear;
}
@keyframes triangleTransform {
  from {
      transform: translateX(-50%) rotateZ(var(--rz)) translateY(15em) rotateX(0deg);
  }
  to {
      transform: translateX(-50%) rotateZ(var(--rz)) translateY(15em) rotateX(360deg);
  }
}
.circle:nth-child(1) {
  --rz: 0deg;
  --delay: 0s;
  --hue: 0deg;
}
.circle:nth-child(2) {
  --rz: 8.1818181818deg;
  --delay: -0.0909090909s;
  --hue: 8.1818181818deg;
}
.circle:nth-child(3) {
  --rz: 16.3636363636deg;
  --delay: -0.1818181818s;
  --hue: 16.3636363636deg;
}
.circle:nth-child(4) {
  --rz: 24.5454545455deg;
  --delay: -0.2727272727s;
  --hue: 24.5454545455deg;
}
.circle:nth-child(5) {
  --rz: 32.7272727273deg;
  --delay: -0.3636363636s;
  --hue: 32.7272727273deg;
}
.circle:nth-child(6) {
  --rz: 40.9090909091deg;
  --delay: -0.4545454545s;
  --hue: 40.9090909091deg;
}
.circle:nth-child(7) {
  --rz: 49.0909090909deg;
  --delay: -0.5454545455s;
  --hue: 49.0909090909deg;
}
.circle:nth-child(8) {
  --rz: 57.2727272727deg;
  --delay: -0.6363636364s;
  --hue: 57.2727272727deg;
}
.circle:nth-child(9) {
  --rz: 65.4545454545deg;
  --delay: -0.7272727273s;
  --hue: 65.4545454545deg;
}
.circle:nth-child(10) {
  --rz: 73.6363636364deg;
  --delay: -0.8181818182s;
  --hue: 73.6363636364deg;
}
.circle:nth-child(11) {
  --rz: 81.8181818182deg;
  --delay: -0.9090909091s;
  --hue: 81.8181818182deg;
}
.circle:nth-child(12) {
  --rz: 90deg;
  --delay: -1s;
  --hue: 90deg;
}
.circle:nth-child(13) {
  --rz: 98.1818181818deg;
  --delay: -1.0909090909s;
  --hue: 98.1818181818deg;
}
.circle:nth-child(14) {
  --rz: 106.3636363636deg;
  --delay: -1.1818181818s;
  --hue: 106.3636363636deg;
}
.circle:nth-child(15) {
  --rz: 114.5454545455deg;
  --delay: -1.2727272727s;
  --hue: 114.5454545455deg;
}
.circle:nth-child(16) {
  --rz: 122.7272727273deg;
  --delay: -1.3636363636s;
  --hue: 122.7272727273deg;
}
.circle:nth-child(17) {
  --rz: 130.9090909091deg;
  --delay: -1.4545454545s;
  --hue: 130.9090909091deg;
}
.circle:nth-child(18) {
  --rz: 139.0909090909deg;
  --delay: -1.5454545455s;
  --hue: 139.0909090909deg;
}
.circle:nth-child(19) {
  --rz: 147.2727272727deg;
  --delay: -1.6363636364s;
  --hue: 147.2727272727deg;
}
.circle:nth-child(20) {
  --rz: 155.4545454545deg;
  --delay: -1.7272727273s;
  --hue: 155.4545454545deg;
}
.circle:nth-child(21) {
  --rz: 163.6363636364deg;
  --delay: -1.8181818182s;
  --hue: 163.6363636364deg;
}
.circle:nth-child(22) {
  --rz: 171.8181818182deg;
  --delay: -1.9090909091s;
  --hue: 171.8181818182deg;
}
.circle:nth-child(23) {
  --rz: 180deg;
  --delay: -2s;
  --hue: 180deg;
}
.circle:nth-child(24) {
  --rz: 188.1818181818deg;
  --delay: -2.0909090909s;
  --hue: 188.1818181818deg;
}
.circle:nth-child(25) {
  --rz: 196.3636363636deg;
  --delay: -2.1818181818s;
  --hue: 196.3636363636deg;
}
.circle:nth-child(26) {
  --rz: 204.5454545455deg;
  --delay: -2.2727272727s;
  --hue: 204.5454545455deg;
}
.circle:nth-child(27) {
  --rz: 212.7272727273deg;
  --delay: -2.3636363636s;
  --hue: 212.7272727273deg;
}
.circle:nth-child(28) {
  --rz: 220.9090909091deg;
  --delay: -2.4545454545s;
  --hue: 220.9090909091deg;
}
.circle:nth-child(29) {
  --rz: 229.0909090909deg;
  --delay: -2.5454545455s;
  --hue: 229.0909090909deg;
}
.circle:nth-child(30) {
  --rz: 237.2727272727deg;
  --delay: -2.6363636364s;
  --hue: 237.2727272727deg;
}
.circle:nth-child(31) {
  --rz: 245.4545454545deg;
  --delay: -2.7272727273s;
  --hue: 245.4545454545deg;
}
.circle:nth-child(32) {
  --rz: 253.6363636364deg;
  --delay: -2.8181818182s;
  --hue: 253.6363636364deg;
}
.circle:nth-child(33) {
  --rz: 261.8181818182deg;
  --delay: -2.9090909091s;
  --hue: 261.8181818182deg;
}
.circle:nth-child(34) {
  --rz: 270deg;
  --delay: -3s;
  --hue: 270deg;
}
.circle:nth-child(35) {
  --rz: 278.1818181818deg;
  --delay: -3.0909090909s;
  --hue: 278.1818181818deg;
}
.circle:nth-child(36) {
  --rz: 286.3636363636deg;
  --delay: -3.1818181818s;
  --hue: 286.3636363636deg;
}
.circle:nth-child(37) {
  --rz: 294.5454545455deg;
  --delay: -3.2727272727s;
  --hue: 294.5454545455deg;
}
.circle:nth-child(38) {
  --rz: 302.7272727273deg;
  --delay: -3.3636363636s;
  --hue: 302.7272727273deg;
}
.circle:nth-child(39) {
  --rz: 310.9090909091deg;
  --delay: -3.4545454545s;
  --hue: 310.9090909091deg;
}
.circle:nth-child(40) {
  --rz: 319.0909090909deg;
  --delay: -3.5454545455s;
  --hue: 319.0909090909deg;
}
.circle:nth-child(41) {
  --rz: 327.2727272727deg;
  --delay: -3.6363636364s;
  --hue: 327.2727272727deg;
}
.circle:nth-child(42) {
  --rz: 335.4545454545deg;
  --delay: -3.7272727273s;
  --hue: 335.4545454545deg;
}
.circle:nth-child(43) {
  --rz: 343.6363636364deg;
  --delay: -3.8181818182s;
  --hue: 343.6363636364deg;
}
.circle:nth-child(44) {
  --rz: 351.8181818182deg;
  --delay: -3.9090909091s;
  --hue: 351.8181818182deg;
}
.circle div {
  filter: drop-shadow(0.8em 0.6em 0.2em #333);
  left: 50%;
  width: 200%;
  height: 20.7em;
  border-radius: 0%;
  border-style: solid;
  border-color: black;
  background-color: hsl(var(--hue), 90%, 70%);
  background-image: linear-gradient(#0002, #0000 25% 100%, #0001);
  transform-origin: top;
}
.circle div:nth-child(1) {
  transform: translateX(-50%) rotateX(30deg);
}
.circle div:nth-child(2) {
  transform: translateX(-50%) rotateX(-30deg);
}
.circle div:nth-child(3) {
  transform: translateX(-50%) translateY(15em) rotateX(-150deg);
}
.circle div:nth-child(4) {
  transform: translateX(-50%) translateY(15em) rotateX(150deg);
}
.circle div:nth-child(1), .circle div:nth-child(2) {
  animation: clip12 2s var(--delay, 0.5s) infinite ease-in-out alternate;
}
@keyframes clip12 {
  from {
      clip-path: circle(25% 0, 75% 0, 87.5% 100%, 12.5% 100%);
  }
  to {
      clip-path: circle(25% 0, 75% 0, 62.5% 100%, 37.5% 100%);
  }
}
.circle div:nth-child(3), .circle div:nth-child(4) {
  animation: clip34 2s var(--delay, 0.5s) infinite ease-in-out alternate;
}
@keyframes clip34 {
  from {
      clip-path: circle(0 0, 100% 0, 87.5% 100%, 12.5% 100%);
  }
  to {
      clip-path: circle(50% 0, 50% 0, 62.5% 100%, 37.5% 100%);
  }
}