body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background-color: #1d1e22;
  overflow: hidden;
}

.snowflake {
  width: 70vmin;
  aspect-ratio: 1/1;
  display: grid;
  filter: drop-shadow(0.5vmin 0.5vmin 2vmin black);
  animation: rotate 20s linear infinite;

  i {
    width: 50%;
    aspect-ratio: 1/1;
    grid-area: 1/1;
    place-self: start end;
    background-color: hsl(0 0 calc(75% + 15% * var(--odd)));
    background-image: conic-gradient(at bottom left, #0005, #0000 var(--a));
    --a: calc(360deg / var(--segments));
    transform-origin: bottom left;
    transform: rotateY(calc(180deg * var(--odd)))
      rotateZ(calc((var(--i) + var(--odd)) * var(--a)));
    --mask: conic-gradient(
      at bottom left,
      #000 var(--a),
      #0000 calc(var(--a) + 0.25deg)
    );
    mask-image: var(--mask);

    --clip: polygon(
      0 0,
      20% 10%,
      50% 0,
      50% 20%,
      20% 20%,
      40% 40%,
      15% 40%,
      30% 60%,
      10% 60%,
      20% 70%,
      5% 80%,
      0 100%,
      0 80%,
      5% 70%,
      0 60%,
      0 50%,
      5% 40%,
      0% 30%,
      0% 20%,
      5% 10%,
      0% 5%
    );
    clip-path: var(--clip);

    &:nth-child(odd) {
      --odd: 0;
    }
    &:nth-child(even) {
      --odd: 1;
    }
  }
}

@keyframes rotate {
  to {
    rotate: 1turn;
  }
}