<div class="block">
  <div class="origin">
    <span class="star" style="--i: 0"></span>
    <span class="star" style="--i: 1"></span>
    <span class="star" style="--i: 2"></span>
    <span class="star" style="--i: 3"></span>
    <span class="star" style="--i: 4"></span>
    <span class="star" style="--i: 5"></span>
    <span class="star" style="--i: 6"></span>
    <span class="star" style="--i: 7"></span>
  </div>
</div>

// @property is currently only supported in chrome/edge and not animatable with @keyframes in Safari

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --blackberry: #1e1f2a;
  --wisteria: #c79de2;
  --bubblegum: #fca8ce;
  --lemon-drop: #fecb40;
  --grass: #99c868;
  --serene-sea: #60c5dd;
  --stars: 8;
}

.block {
  --angle: 0;
  --sz: clamp(320px, 50vw, 50rem);
  --angle-offset: calc(360 / var(--stars) * 1deg);
  margin: auto;
  width: var(--sz);
  aspect-ratio: 1/ 1;
  position: relative;
  place-content: center;
}

// center point for stars to orbit around
.origin {
  --sz: clamp(1rem, 10vw, 50rem);
  --r: calc(var(--sz) * 1.25);
  width: var(--sz);
  margin: auto;
  aspect-ratio: 1;
  position: relative;
}

.star {
  --s-angle: calc(var(--angle-offset) * var(--i));
  --d: calc(var(--sz) / 2);
  --x: calc(var(--r) * cos(calc(var(--s-angle) + var(--angle))));
  --y: calc(var(--r) * sin(calc(var(--s-angle) + var(--angle))));

  --shadow-offset: calc(var(--d) / 4);
  position: absolute;
  top: calc(var(--d) / 2);
  left: calc(var(--d) / 2);
  background-color: var(--bg-color);
  width: var(--d);
  aspect-ratio: 1;
  border-radius: 50%;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  transform: translate(var(--x), var(--y)) rotate(calc(var(--angle) * -1));
  animation: rotate 6s infinite linear;
  will-change: transform;

  box-shadow: var(--left-shad-color) var(--shadow-offset) var(--shadow-offset)
      inset,
    var(--right-shad-color) calc(var(--shadow-offset) * -1)
      calc(var(--shadow-offset) * -1) inset;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

/* page styles/setup */

$even-colors: var(--wisteria), var(--lemon-drop), var(--serene-sea);

$odd-colors: var(--lemon-drop), var(--bubblegum), var(--grass);

@for $i from 1 through 8 {
  $colors: $even-colors;

  @if ($i % 2 == 0) {
    $colors: $even-colors;
  } @else {
    $colors: $odd-colors;
  }

  .star:nth-child(#{$i}) {
    --bg-color: #{nth($colors, 1)};
    --left-shad-color: #{nth($colors, 2)};
    --right-shad-color: #{nth($colors, 3)};
  }
}

body {
  min-height: 100svh;
  display: flex;
  place-items: center;
  background-color: var(--blackberry);
}