Blue Orb in CSS

I stepped on this codepen and I tried to implement it with little to no alterations in a Zola theme I'm developing; in the end, I changed my mind because this animation can be pretty heavy on every single page of the website and I want my theme to stay light and speedy.

Despite that conclusion, I really liked this theme, so I want to leave here a demo and the related code. All credits go to the author, of course.

$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 %}