- var n = 128, ha = Math.PI/n;

style 
  | :root {
  |   --n: #{n};
  |   --f: #{Math.tan(ha)}
  | }
while n--
  .spike(style=`--i: ${n}`)

@import 'compass/css3';

@property --fx {
  syntax: '<number>';
  initial-value: 1;
  inherits: true
}

$p: 3;
$h: .25em;
$w: 4em;
$t: 9s;
$min: .1;
$dif: 1 - $min;
$amp: .5*$dif;
$mid: $min + $amp;
$m: 36;
$ua: 360deg/$m;

html { overflow: hidden }

body { background: #000 }

.spike {
  --fx: calc(var(--i)/var(--n));
  position: absolute;
  top: calc(50% - #{.5*$h}); left: 50%;
  width: $w; height: $h;
  transform-origin: 0 50%;
  transform: rotate(calc(var(--i)*1turn/var(--n)))
    translate(calc(#{$h}/var(--f))) scalex(var(--fx));
  background: currentcolor;
  color: HSL(calc(var(--i)*#{$p}*360/var(--n)), 100%, 75%);
  animation: a $t ease-in-out calc(var(--i)/var(--n)*#{-2*$t}) infinite;
  
  &:before, &:after {
    --k: 0;
    --s: calc(2*var(--k) - 1);
    position: absolute;
    top: calc(50% - #{.5*$h});
    left: calc(var(--k)*100% - #{.5*$h});
    width: $h; height: $h;
    border-radius: 50%;
    transform: scalex(calc(1/var(--fx)));
    background: inherit;
    content: ''
  }
  
  &:after { --k: 1 }
  
  &:nth-child(2n) {
    &:before, &:after {
      box-shadow: calc(var(--s)*#{2*$h}) 0 0 -1px currentcolor;
    }
  }
}

@keyframes a {
  @for $i from 0 through $m {
    #{$i*100%/$m} { --fx: #{$mid + 2*$amp*sin($i*2*$ua)*sin($i*3*$ua)*sin($i*5*$ua)*sin($i*7*$ua)} }
  }
}