Blue Orb in CSS

Mi sono imbattuto in questo codepen ed ho cercato di reimplementarlo con qualche modifica in un tema che sto sviluppando, ma poi ho cambiato idea perché appesantisce un po' troppo la pagina ed il tema, che è già piuttosto leggero, aspira a rimanere tale.

Ci tengo comunque a lasciare di seguito una dimostrazione ed anche a lasciare in chiaro il codice correlato.

$total: 300; // total particles
$orb-size: 100px;
$particle-size: 3px;
$time: 14s;
$base-hue: 180; // change for diff colors (180 is nice)

.wrap {
  position: relative;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: rotate $time infinite cubic-bezier(.46,.03,.52,.96); // rotate orb
}

@keyframes rotate {
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

.c {
  position: absolute;
  width: $particle-size;
  height: $particle-size;
  border-radius: 50%;
  opacity: 0;
}

@for $i from 1 through $total {
  $z: (random(360) * 1deg); // random angle to rotateZ
  $y: (random(360) * 1deg); // random to rotateX
  $hue: ((40/$total * $i) + $base-hue); // set hue

  .c:nth-child(#{$i}){ // grab the nth particle
    animation: orbit#{$i} $time infinite;
    animation-delay: ($i * .01s);
    background-color: hsla($hue, 100%, 50%, 1);
  }

  @keyframes orbit#{$i}{
    20% {
      opacity: 1; // fade in
    }
    30% {
      transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // form orb
    }
    80% {
      transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // hold orb state 30-80
      opacity: 1; // hold opacity 20-80
    }
    100% {
       transform: rotateZ(-$z) rotateY($y) translateX( ($orb-size * 3) ) rotateZ($z); // translateX * 3
    }
  }
}

Questo SCSS va ad animare degli elementi in un semplice div. In questo caso 300 elementi.

{% macro wrap() %}
<div class="wrap">
    <div class="c"></div><!-- x300 -->
</div>
{% endmacro %}