.container
  .fire
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot
    .dot

*,*:before,*:after{
  box-sizing:border-box;
}
html,body{
  height:100%;
  padding: 20px;
  background:#000;
}
$duration:2;
$delay:3;
@function randomNum($max,$min:0){
  @return (random($max) + $min)
}
.container{
  margin: 0 auto;
  position: relative;
  width: 200px;
  height: 400px;
  background-color: #000000;
}
.fire{
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translate3d(-50%,0,0) scaleX(.5);
  width: 0;
  height: 0;
  border: 200px solid #000;
  border-bottom-color: transparent;
  border-radius: 40%;
  filter: blur(20px) contrast(20);
  background-color: #cc9c1e;
}
@for $i from 1 through 10 {
  .dot:nth-child(#{$i}){
    position: absolute;
    top: 250px;
    left: -10px*$i;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000000;
  }
}
@for $i from 11 through 20 {
  .dot:nth-child(#{$i}){
    position: absolute;
    top: 250px;
    left: 5px*$i;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000000;
  }
}
@for $i from 1 through 20 {
  .dot:nth-child(#{$i}){
    animation: moveTop #{randomNum(($duration * 13),7) / 10}s linear #{randomNum($delay * 20) / 10}s infinite;
  }
}
@keyframes moveTop {
  to{
    transform: translate3d(0,-300px,0);
  }
}