colorfull dots created with shadow

index.jade

.one

style.scss

html,
body {
    height: 100%;
    overflow: hidden;
}
body {
    background: black;
    min-height: 100%;
}

// dots should be in this box
$containerW: 1200;
$containerH: 300;

// specify the dot count
$dotCount: 100;

// specify animation steps
$animSteps: 30;

// specify animation duration
$animDuration: 30;

// generate the property of one shadow
@function -generateOneShadow() {
  $w: $containerW;
  $h: $containerH;
  @return #{random($w)}px #{random($h)}px 0 0 rgba(random(255),random(255),random(255),random(100)/100*50);
}

// get more shadows
@function -generateMultipleShadows($count) {
  $s: -generateOneShadow();
  
  // adjust dot count
  $count: $count - 1;
  
  @for $v from 1 through $count {
    $s: $s, -generateOneShadow();
  }
  @return $s;
}

// mixin the selector and the shadows
@mixin generateBoxShadows() {
  
  // this is the holy shadow
  box-shadow: -generateMultipleShadows($dotCount);
}

// 
@keyframes dotAnim {
  @for $j from 1 through $animSteps {
    #{$j*100/$animSteps}% {
      @include generateBoxShadows();
    }
  }
}

// this is the holy div
.one {
    position: relative;
    top: 20px;
    left: -#{$containerW/2}px;
    margin: 0 auto;
    height: 10px;
    width: 10px;
    border-radius: 50%;    
    animation: dotAnim #{$animDuration}s ease-in-out infinite alternate;
}