.star.comet

$blue: #03061A;
$panko: #EDCDA3;
$white: #FFFFFF;

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

html,body {
  @include size(100%);
  margin:0;
  padding:0;
  background-color:$blue;
  position:relative;
  overflow:hidden;
}

.star {
  @include size(3px);
  border-radius: 50%;
  position: absolute;
  background-color: rgba($panko, .8);
  box-shadow: 0 0 40px 0 rgba($panko, .8), 0 0 20px 0 $white;
  animation: glow 5s infinite;
  &--medium {
    @include size(6px);
  }
  &--big {
    @include size(9px);
    box-shadow: 0 0 40px 0 $panko, 0 0 20px 0 $white, inset 0 0 4px $white;
  }
}

.comet {
  @include size(6px);
  background-color: rgba($white, .6);
  box-shadow: 0 0 40px 0 $panko, 0 0 20px 0 $white, inset 0 0 8px rgba($white,.6);
  top: 0;
  left: 80%;
  opacity: 0.3;
  transform: rotate(-45deg) translate(0,-50px);
  animation: comet 6s infinite;
  &:after {
    content: '';
    @include size(20vw,6px);
    border-radius: 50%;
    background-color: rgba($white, .1);
    box-shadow: 0 0 20px rgba($panko, .4);
    position: absolute;
    top: 0;
    left: 0;
  }
}

@keyframes glow {
  0% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes comet {
  0% {
    transform: rotate(-45deg) translateX(0);
    opacity: 0.3;
  }
  10% {
    opacity: 1;
  }
  20% {
    transform: rotate(-45deg) translateX(-100vw);
    opacity: 0;
  }
  100% {
    transform: rotate(-45deg) translateX(-100vw);
    opacity: 0;
  }
}

const wH = window.innerHeight
const wW = window.innerWidth

const generateStars = n => {
  for (let i = 0; i < n; i++) {
    const div = document.createElement('div')
    div.className = i % 20 == 0 ? 'star star--big' : i % 9 == 0 ? 'star star--medium' : 'star'
    // random everywhere!
    div.setAttribute('style', `top:${Math.round(Math.random()*wH)}px;left:${Math.round(Math.random()*wW)}px;animation-duration:${Math.round(Math.random()*3000) + 3000}ms;animation-delay:${Math.round(Math.random()*3000)}ms;`)
    document.body.appendChild(div)
  }
}

generateStars(150)