-2.times do
  .galaxy
    -20.times do
      .stars
        .circle
          -35.times do
            .dot

$star-count: 20;
$dot-count: 35;
$speed: 5s;
html,body{
  width: 100%;height: 100%;
}
body{
  background-color: #140032;
  overflow: hidden;
  margin:0;
  *{
    position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius:50%;
  }
}
.galaxy:nth-child(1){
  transform: translateX(-120px) scale(-1,1);
}
.galaxy:nth-child(2){
  transform: translateX(120px) scale(1,-1);
}
.stars{
  width: 200px;height: 200px;
  .circle{
    animation: $speed galaxy ease-in-out infinite reverse;
  }
  .dot{
    width: 10px; height: 10px;
    border: 5px dotted #fff;
    $update-dot-count: $dot-count - 5;
    @for $i from 0 through $dot-count{
      &:nth-child(#{$i}){
        transform: rotate($i * 360deg / $update-dot-count) translate(120px) scale(1 - $i * 1 / $update-dot-count);
        border-color: hsla(300 - ($i * 70 / $update-dot-count),100%,50%,1); 
      }
    }
  }
  @for $i from 0 through $star-count{
    &:nth-child(#{$i}){
      transform: rotate($i * 360deg / $star-count) translate(80px);
       .circle {
        animation-delay: -$i * $speed / $star-count;
      }        
    }
  }  
}
@keyframes galaxy{
 100%{
   transform: rotate(360deg);
  }
}

//pure css