<div class="stuff"></div>

//@import 'compass'; // for the random() function

$circles: ();
$move: ();

@for $i from 0 through 15 {
  $start-x: random(0, 100) * 1vw;
  $start-y: random(0, 100) * 1vh;

  $end-x: random(-50, 150) * 1vw;
  $end-y: random(-50, 150) * 1vh;
  
  $circles: append($circles, 
    radial-gradient(random(1, 100) * 1vw, #fff 0%, #333 50%, #fff, #000, #eee) 
    $start-x $start-y, 
  comma);
  
  $move: append($move, $end-x $end-y, comma);
}

.stuff {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  
  animation: ouch 7s infinite alternate;
  background: $circles;
  background-color: #000;
  background-blend-mode: difference;
  
  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
  }
  
  &::before {
    background: #0082ab;
    mix-blend-mode: color-burn;
  }
  
  &::after {}
}

@keyframes ouch {
  100% {
    background-position: $move;
  }
}