Burn trees

by NullDev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div class="container">
  <div class="side side-odd">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="side side-even">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="side side-odd">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="side side-even">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="side side-odd">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="side side-even">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>
<div class="cc">
Burned down <span id="c">0</span> trees...<br>
<small>Animation frame iterations: <span id="i">0</span></small>
</div>

CSS

:root {
  box-sizing: border-box;
}

small {    font-size: 20px;}

.cc {
  color: #FFF;margin-left: 20px;font-size: 40px;font-family: sans-serif;
    border-radius: 10px 10px 10px 10px;
    border-left: 9px solid #FFF;padding-left: 20px;

}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: calc(max(100vh, 400px));
  background-color: #fcbc04;
  transform: scale(0.75);
}
body .container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  position: relative;
  opacity: 0.9;
}
body .container .side {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 250px;
  height: 25px;
}
body .container .side > div {
  height: inherit;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 0 0 7.5px #ffffff22;
}
body .container .side:nth-child(1) {
  transform: rotate(0deg);
}
body .container .side:nth-child(2) {
  transform: rotate(30deg);
}
body .container .side:nth-child(3) {
  transform: rotate(60deg);
}
body .container .side:nth-child(4) {
  transform: rotate(90deg);
}
body .container .side:nth-child(5) {
  transform: rotate(120deg);
}
body .container .side:nth-child(6) {
  transform: rotate(150deg);
}
body .container .side-odd .left {
  width: 40px;
}
body .container .side-odd .right {
  width: 40px;
}
body .container .side-even .left {
  width: 80px;
}
body .container .side-even .right {
  width: 80px;
}

JavaScript

let c = 0;
let i = 0;
anime({
  targets: '.container',
  keyframes: [
    {rotateZ: 30},
    {rotateZ: 60},
    {rotateZ: 90},
    {rotateZ: 120},
    {rotateZ: 150},
    {rotateZ: 180},
  ],
  duration: 9000,
  loop: true,
  update: function(anim) {
      document.getElementById("i").innerHTML = String(i++);
  }
})

anime({
  targets: ['.side-odd .left', '.side-odd .right'],
  keyframes: [
    {width: '80px'},
    {width: '40px'}
  ],
  duration: 3000,
  loop: true,
  loopComplete: function(anim) {
      document.getElementById("c").innerHTML = String(c++);
  },
  update: function(anim) {
      document.getElementById("i").innerHTML = String(i++);
  }
})

anime({
  targets: ['.side-even .left', '.side-even .right'],
  keyframes: [
    {width: '40px'},
    {width: '80px'}
  ],
  duration: 3000,
  loop: true,
  update: function(anim) {
      document.getElementById("i").innerHTML = String(i++);
  }
})