<main>
  <div id="fire">
    <div id="fire-block"></div>
    <div id="buche-stack">
      <div class="buche"></div>
      <div class="buche"></div>
    </div>
  </div>
  <hr>
  <div id="cmds">
    <label>Multicolour</label>
    <div class="switch">
      <input id="switchbox" type="checkbox"/>
      <div class="switch-object">
        <div class="toggle"><span></span></div>
      </div>
    </div>
    <label>Normal</label>
  </div>
</main>
<a target="_blank" style="display: block; position: fixed; z-index:9999; bottom: 10px; right: 10px; width: 60px;" href="http://www.yoannbraie.fr/board/"><img style="width: 100%;" src="http://images.yoannbraie.fr/logoyb_white.png" alt="logo"/></a>

@import url('https://fonts.googleapis.com/css?family=Spartan&display=swap');
:root {
  --cylinder-width: 170px;
  --cylinder-height: 50px;
  --fire-multiplier: 3;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(2,5,38,1) 100%, rgba(0,212,255,1) 100%);
}
main {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

@keyframes fireBurn {
  0%   { transform: rotate(0deg) translateX(0px) translateY(0px) scale(.9); opacity: 0.8;}
  50% { transform: rotate(00deg) translateX(-20px) translateY(-20px) scale(1.1); opacity: 1;}
  100% { transform: rotate(00deg) translateX(-30px) translateY(-30px) scale(.6); opacity: 0;}
}

.buche {
  background-color: #821f1f;
  width: var(--cylinder-width);
  height: var(--cylinder-height);
  position: relative;
  border-radius: calc(var(--cylinder-height) / 2);
  display: inline-block;
}
.buche::before {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #942d2d;
  height: var(--cylinder-height);
  width: var(--cylinder-height);
  border-radius: 50%;
  transform: scale(.95);
}

#buche-stack > .buche:nth-child(1) {
  transform: rotateZ(-20deg) translateX(40px) translateY(40px);
}

#buche-stack > .buche:nth-child(2) {
  transform: rotateZ(-160deg) translateX(40px) translateY(-40px);
}
#fire-block {
  width: calc(var(--cylinder-height) * var(--fire-multiplier));
  height: calc(var(--cylinder-height) * var(--fire-multiplier));
  transform: rotate(45deg) translateX(10px) translateY(10px);
  margin: auto;
  z-index: 5;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
#buche-stack {
  position: relative;
  z-index: 3;
}
.fire-particle {
  width: calc( (var(--cylinder-height) * var(--fire-multiplier)) / 5 );
  height: calc( (var(--cylinder-height) * var(--fire-multiplier)) / 5 );
  border-radius: 2px;
  transition: background-color 1s;
}

.animType1 {
  animation: fireBurn 2.1s linear 0s infinite;
}

.animType2 {
  animation: fireBurn 2.2s linear .3s infinite;
}

.animType3 {
  animation: fireBurn 2.3s linear .7s infinite;
}

.animType4 {
  animation: fireBurn 2.4s linear 1s infinite;
}

.animType5 {
  animation: fireBurn 2.5s linear 1.3s infinite;
}

.animType6 {
  animation: fireBurn 2.6s linear 1.6s infinite;
}

.animType7 {
  animation: fireBurn 2.7s linear 1.8s infinite;
}

.animType8 {
  animation: fireBurn 2.8s linear 2s infinite;
}

hr {
  opacity: 0;
  margin: 40px 0;
}

.switch{
  display: inline-block;
  position: relative;
}
.switch > input[type="checkbox"]{
  width: 100px;
  height: 50px;
  position: relative;
  opacity: 0;
  z-index: 2;
  cursor: pointer !important;
}
.switch-object{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
}
.toggle{
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet);
  border-radius: 20px;
  transition: all .3s;
  padding: 3px;
}
.switch-object > .toggle > span{
  display: block;
  border-radius: 50%;
  width: calc(50% - 6px);
  height: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  transition: all .3s;
  transform: rotate(270deg);
}
.switch > input[type="checkbox"]:checked ~ .switch-object > .toggle{
  background-image: linear-gradient(0deg, red, orange);
}
.switch > input[type="checkbox"]:checked ~ .switch-object > .toggle > span{
  margin-left: calc(50% + 6px);
  transform: rotate(0deg);
}

#cmds {
  display: block;
}

label {
  display: inline-block;
  color: white;
  position: relative;
  vertical-align: top;
  padding: 22px 5px;
  width: 150px;
  font-family: 'Spartan';
}

class Fire {
  constructor(nbfire) {
    this.nbfire = nbfire
    this.multicolourfire = true;
    this.fireblock = document.querySelector("#fire-block");
  }

  initSwitchEvent() {
    let switchbox = document.querySelector("#switchbox");
    switchbox.addEventListener("change", (self) => {
      this.multicolourfire = !switchbox.checked;
      this.reupdate();
    });
  }

  create() {
    for (var i = 0; i < this.nbfire; i++) {
      let f = document.createElement("div");
      f.classList.add("fire-particle");
      f.classList.add("animType" + this.getRandomAnimClass());
      f.style.backgroundColor = this.getRandomColor();
      this.fireblock.appendChild(f);
    }
  }

  reupdate() {
    var fireIndex = 0;
    Array.from(this.fireblock.children).forEach((elt) => {
      fireIndex ++;
      setTimeout(() => {
        elt.style.backgroundColor = this.getRandomColor();
      }, fireIndex * 100)
    })
  }

  getRandomColor() {
    if (this.multicolourfire) {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }else {
      let colorTab = ["d6330e", "d64f0e", "e4980c", "d6330e", "e4340c", "e4b50c", "c5620e"];
      return "#" + colorTab[Math.floor(Math.random() * colorTab.length)]  
    }
  }

  getRandomAnimClass() {
    return Math.floor(1 + Math.random() * 8)
  }
}

var fire = new Fire(25);
fire.initSwitchEvent();
fire.create();