Рождественские огни для сайта

Используйте этот эффект боке , чтобы осветить свой веб-сайт к рождественским праздникам, а размытые огни на заднем плане придадут ему художественный оттенок.

Pug

- var lights = 150;

h1 Merry Christmas

.bokeh
  - for (var i = 0; i < lights; i++)
    .light

SCSS

/* Font */
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/* Colors */
$colorCollection: (#D00010, #FEC641, #63C13B, #FE0016, #5C6C94, #6B0D05, #7D0006, #DB1913, #FEE34A, #2F8A27);
// $colorCollection: (#F4A43B, #0AB1AA, #FDFEE4, #F42618, #ADFEDD, #FF5F24, #FEF14F, #FD361B, #30398D, #FEE086);
// $colorCollection: (#FCF1BD);

/* Config */
$lights: 150; // match lights in mark up
$textColor: #FFFFFF;
$totalAnimation: 5;
$lightSize: 75;
$blurLevel: 2;

/* Pretty Lights */
.bokeh{
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  top: -50px;
  left: -25px;
}

.light{
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}

@for $i from 1 through $lights{
  $lightWidth: $lightSize + random(25);
  $lightHeight: $lightWidth;
  $lightVertical: random(100);
  $lightHorizontal: random(100);
  $lightBlur: $blurLevel + random($blurLevel);
  $lightDelay: 10 + random(25);
  $animation: 1 + random($totalAnimation);

  .light:nth-child(#{$i}){
    width: $lightWidth + px;
    height: $lightHeight + px;
    top: #{$lightVertical + "%"};
    left: #{$lightHorizontal + "%"};
    background: nth($colorCollection, random(length($colorCollection)));
     filter: blur($lightBlur + px);
    animation: #{$lightDelay + s} #{"light" + $animation} linear infinite;
  }
}

@for $i from 1 through $totalAnimation{
  @keyframes light#{$i} {
    25%{
      opacity: (25 + random(50)) * 0.01;
    }
    50%{
      opacity: 0;
    }
    75%{
      opacity: (25 + random(50)) * 0.01;
    }
    100%{
      opacity: 0;
    }
  }
}


/* Other Stuff */
body, html{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  background-image: linear-gradient(#0A0707 0%, #110C0D 50%, #0C090A 100%);
}

h1 {
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0px 0px 50px rgba($textColor, 0.5);
  color: $textColor;
  position: absolute;
  top: 25%;
  z-index: 10;
  opacity: 0.9;
  left: 0%;
  right: 0%;
}