$w: 300px;
$r: $w/2;
$wi: 20px;
$cx: $r - $wi/2;
$cy: $r - $wi/2;
$r: $r - $wi/2;
$time: 3s;

@keyframes ball1 {
    0%   {left: $cx+$r*cos(0); top: $cy+$r*sin(0);}
    100% {left: $cx+$r*cos(pi()); top: $cy+$r*sin(pi());}
}

@keyframes ball2 {
    0%   {left: $cx + $r*cos(pi()/2); top: $cy + $r*sin(pi()/2);}
    100% {left: $cx - $r*cos(pi()/2); top: $cy - $r*sin(pi()/2);}
}

@keyframes ball3 {
    0%   {left: $cx + $r*cos(pi()/4); top: $cy + $r*sin(pi()/4);}
    100% {left: $cx + $r*cos(pi() - pi()/4); top: $cy - $r*sin(pi() - pi()/4);}
}

@keyframes ball4 {
    0%   {left: $cx - $r*cos(pi()/4); top: $cy+$r*sin(pi()/4);}
    100% {left: $cx - $r*cos(pi() - pi()/4); top: $cy - $r*sin(pi() - pi()/4);}
}

@keyframes ball5 {
    0% {left: $cx - $r*cos(pi()/8); top: $cy + $r*sin(pi()/8);}
    100%   {left: $cx+$r*cos(pi()/8); top: $cy - $r*sin(pi()/8);}
}

@keyframes ball6 {
    0% {left: $cx - $r*cos(pi()/4 + pi()/8); top: $cy + $r*sin(pi()/4 + pi()/8);}
    100%   {left: $cx+$r*cos(pi()/4 + pi()/8); top: $cy - $r*sin(pi()/4 + pi()/8);}
}

@keyframes ball7 {
    0% {left: $cx + $r*cos(pi()/8); top: $cy + $r*sin(pi()/8);}
    100%   {left: $cx - $r*cos(pi()/8); top: $cy - $r*sin(pi()/8);}
}

@keyframes ball8 {
    0% {left: $cx + $r*cos(pi()/4 + pi()/8); top: $cy + $r*sin(pi()/4 + pi()/8);}
    100%   {left: $cx - $r*cos(pi()/4 + pi()/8); top: $cy - $r*sin(pi()/4 + pi()/8);}
}


div#c {
  position: relative;
  background-color: #ff3019;
  @include filter-gradient(#ff3019, #cf0404, vertical);
  @include background-image(linear-gradient(top,  #ff3019 0%,#cf0404 100%));
  margin: 30px auto;
  width: $w;
  height: $w;
  border-radius: 50%;
  box-shadow: 0px 0px 100px 20px #ccc;
}

#i1 { 
  animation-name: ball1;
}
#i2 { 
  animation-name: ball2;
  animation-delay: $time/2; 
}
#i3 { 
  animation-name: ball3;
  animation-delay: $time/4; 
}
#i4 { 
  animation-name: ball4;
  animation-delay: $time - $time/4;
}
#i5 { 
  animation-name: ball5;
  animation-delay: $time/2 + 3*$time/8;
}
#i6 { 
  animation-name: ball6;
  animation-delay: $time/2 + $time/8;
}
#i7 { 
  animation-name: ball7;
  animation-delay: $time/8;
}
#i8 { 
  animation-name: ball8;
  animation-delay: $time/4 + $time/8;
}

.ball {  
  position: absolute;  
  width: $wi;
  height: $wi;
  left: $cx;
  top: $cy;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0px 0px 5px 1px white;
  animation-duration: $time;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  animation-fill-mode: backwards; /* great feature of the animation api, this help setting the phase */
}

p {
  font-family: sans-serif;
  text-align: center;
}

a {
  color: black;
  text-decoration: none;
}