.mommy
  .daddy
    - for (var x = 1; x < 250; x++)
      span
View Compiled
@import 'compass';

body {
  height: 100vh;
  overflow: hidden;
  background: black;
}

.mommy{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  perspective: 800px;
}

.daddy{
  transform-style: preserve-3d;
  animation : rotate 25s infinite linear;
}
span{
  position: absolute;
  top:50%;
  left:50%;
  transform-style: preserve-3d;
  &:before{
    content:"";
    width: 6px;
    height: 6px;
    display: inline-block;
    position: absolute;
    top: calc(50% - 3px);
    left: calc(50% - 3px);
    background: currentColor;
    border-radius: 50%;
    animation: invertRotate 25s infinite linear, scale 2s infinite linear;
    box-shadow: 0 0 10px currentColor;
  }
}

$amount : 250;
@for $i from 1 through $amount {
  
  $theta : ($i / $amount)*pi()*101;
  $phi : ($i / $amount) * pi();
  $x : 250px * sin($phi) * cos($theta);
  $y : 250px * sin($phi) * sin($theta);
  $z : 250px * cos($phi);
  .mommy span:nth-child(#{$i}){
    transform: translate3d($x, $y, $z);
    color: hsl(($i/$amount)*90+180,100%,($i/$amount)*20 + 50%);
    &:before{
      animation-delay: 0s, -($i/$amount)*2.4s;
    }
  }  
}

@keyframes rotate{
  to{transform:rotateY(360deg);}
}
@keyframes invertRotate{
  to{transform:rotateY(-360deg);}
}
@keyframes scale{
  0%, 40%,60%{ box-shadow: 0 0 10px 0px  currentColor; }
  50%{ box-shadow: 0 0 10px 7px currentColor; }
}
View Compiled
Rerun