CAMPFIRE MADE USING HTML AND CSS

The campfire

This is just another creation of mine using HTML(Haml)and CSS(SCSS).There is nothing more to say about this now because of i am providing complete code which i had used here.So first take a look at the demo after that we can get into the coding section.

DEMO:

FullScreenView

Now let's get ino the coding section where we first meet the HTML.

HTML(Haml):

.container
  .glow
  .logs
    .one
      .log
    .two
      .log
    .three
      .log
  .fire
    .flames
      .one
        .flame
      .two
        .flame
      .three
        .flame
    .flames.inner
      .one
        .flame
      .two
        .flame
      .three
        .flame

CSS(SCSS):

$background: #1c2766;
$bark: #725442;
$wood: #91725c;

$flame-outer: #ff770f;
$flame-inner: #ffda77;

$log-width: 20rem;

html{
  font-size: 1vh;
  @media screen and (max-aspect-ratio: 1/1){
    font-size: 1vw;
  }
  // using rem as an easy custom-sized unit that guarantees everything scales correctly to the viewport size
  margin:0;
  padding:0;
}
body{
  margin:0;
  padding:0;
  height: 100vh;
  width: 100vw;
  background: $background;
}

.container{
  width: 80rem;
  height: 80rem;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  *{
    position: absolute;
  }
}

.logs{
  bottom:0;
  left:50%;
  transform: translatex(-50%);
  width: 10rem;
  .two{
    width:$log-width;
    bottom:0;
    left: 50%;
    transform: translatex(-50%);
    .log{
      position:relative;
      width:100%;
      height: 0.75 * $log-width;
      background: $bark;
      margin-bottom: -8rem;
      clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
    }
    &::before{
      content:'';
      display:block;
      position:relative;
      width: (0.4 * $log-width);
      height: (0.9 * 0.4 * $log-width);
      background: $bark;
      margin:0 auto;
      border-radius: 50%;
      transform: translatey(60%);
    }
    &::after{
      content:'';
      display:block;
      position:relative;
      width: $log-width;
      height: (0.9 * $log-width);
      border-radius: 50%;
      background: $wood;
      box-sizing: border-box;
      border: 1rem $bark solid;
    }
  }
  .one, .three{
    width:0.9 * $log-width;
    margin-left: -18rem;
    bottom:-11rem;
    .log{
      position:relative;
      width:100%;
      height: 0.9 * $log-width;
      background: $bark;
      clip-path: polygon(0% 0%, 100% 0%, 100% 41%, 11% 100%);
      transform-origin: 0 0;
      transform: skewy(-10deg);
    }
    &::before{
      content:'';
      display:block;
      position:relative;
      width: (0.4 * 0.6 * $log-width);
      height: (0.4 * 0.9 * $log-width);
      background: $bark;
      margin-right:0;
      margin-left:auto;
      border-radius: 50%;
      transform:translate(45%, 57%);
    }
    &::after{
      content:'';
      display:block;
      position:relative;
      width: 0.6*$log-width;
      height: (0.9 * $log-width);
      border-radius: 50%;
      background: $wood;
      transform: translate(-50%, -100%);
      box-sizing:border-box;
      border: 1rem $bark solid;
    }
  }
  .three{
    transform: scalex(-1);
    margin-left: 10rem;
  }
}

.fire{
  left:50%;
  bottom:24.5rem;
}
.flames{
  > *{
    bottom:0;
    right:0;
    .flame{
      bottom:0;
      right:0;
      background: rgba($flame-outer, 0.6);
      width: 35rem;
      height: 48rem;
      border-radius: 0 40rem;
      transform-origin: 100% 100%;
    }
  }
  .two{
    transform: rotate(30deg);
  }
  .three{
    transform: scalex(-1);
  }
  &.inner{
    >* .flame{
      background: rgba($flame-inner, 0.4);
      width: 20rem;
      height: 24rem;
    }
  }
}
.glow{
  background: radial-gradient(closest-side, $flame-outer, rgba($flame-outer, 0));
  width: 100%;
  height: 100%;
  top: -8rem;
}

// ANIMATIONS

.one .flame, .inner .one .flame{
  animation-delay: -0.2s;
}
.two .flame, .inner .one .flame{
  animation-delay: -0.5s;
}
.three .flame, .inner .one .flame{
  animation-delay: -0.9s;
}

.flame{
  animation:
    wave 1s ease-in-out infinite alternate,
    flicker 0.3s ease-in-out infinite alternate,
    height 0.5s ease infinite alternate;
}
.inner .flame{
  animation:
    wave 0.8s ease-in-out infinite alternate,
    flicker 0.2s ease-in-out infinite alternate,
    heightsmall 0.3s ease infinite alternate;
}
.glow{
  animation:
    glow 0.8s ease-in-out infinite alternate,
    flicker 0.3s ease-in-out infinite alternate;
}



@keyframes wave{
  from{
    transform:rotate(-5deg);
  }
  to{
    transform:rotate(5deg);
  }
}

@keyframes flicker{
  from{
    opacity: 0.8;
  }
  to{
    opacity: 1;
  }
}

@keyframes height{
  from{
    height: 48rem;
    width: 35rem;
  }
  to{
    height: 44rem;
    width: 30rem;
  }
}

@keyframes heightsmall{
  from{
    height: 24rem;
    width: 20rem;
  }
  to{
    height: 23rem;
    width: 18rem;
  }
}
@keyframes glow{
  from{
    transform: scale(1.1);
  }
  to{
    transform: scale(1);
  }
}