watzon.tech/_components/fire.njk

<div class="fire">
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
  <div class="flame"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="fire-effect" width="0" height="0">
  <defs>
    <filter id="fire-blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="fire-blur" />
    </filter>
  </defs>
</svg>

<style>
  .fire {
    position: relative;
    width: 12em;
    height: 12em;
    overflow: hidden;
    border-radius: 100%;
    filter: url(#fire-blur);
  }
  .flame,
  .flame::after {
    position: absolute;
    border-radius: 100%;
    animation-fill-mode: backwards;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.5, 0.07, 0.64, 1);
    animation-iteration-count: infinite;
  }
  .flame {
    left: 12%;
    bottom: 0;
    width: 5em;
    height: 5em;
    background: hsl(0deg, 70%, 60%);
    animation-name: firecircle;
    will-change: transform;
  }
  .flame::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(50deg, 100%, 80%);
    animation-name: fireafter;
    will-change: opacity;
    opacity: 0;
  }
  .flame:nth-child(1),
  .flame:nth-child(1)::after {
    animation-delay: 0.14s;
  }
  .flame:nth-child(1) {
    margin-left: 0.8em;
    margin-bottom: -1em;
  }
  .flame:nth-child(2),
  .flame:nth-child(2)::after {
    animation-delay: 0.28s;
  }
  .flame:nth-child(2) {
    margin-left: 1.1em;
    margin-bottom: -1.8em;
  }
  .flame:nth-child(3),
  .flame:nth-child(3)::after {
    animation-delay: 0.42s;
  }
  .flame:nth-child(3) {
    margin-left: 3.8em;
    margin-bottom: -1.8em;
  }
  .flame:nth-child(4),
  .flame:nth-child(4)::after {
    animation-delay: 0.56s;
  }
  .flame:nth-child(4) {
    margin-left: 1.8em;
    margin-bottom: -2.1em;
  }
  .flame:nth-child(5),
  .flame:nth-child(5)::after {
    animation-delay: 0.7s;
  }
  .flame:nth-child(5) {
    margin-left: 3.8em;
    margin-bottom: -2.1em;
  }
  .flame:nth-child(6),
  .flame:nth-child(6)::after {
    animation-delay: 0.84s;
  }
  .flame:nth-child(6) {
    margin-left: 3.3em;
    margin-bottom: -1em;
  }
  .flame:nth-child(7),
  .flame:nth-child(7)::after {
    animation-delay: 0.98s;
  }
  .flame:nth-child(7) {
    margin-left: 4em;
    margin-bottom: -2.2em;
  }
  .flame:nth-child(8),
  .flame:nth-child(8)::after {
    animation-delay: 1.12s;
  }
  .flame:nth-child(8) {
    margin-left: 0.1em;
    margin-bottom: -1.5em;
  }
  .flame:nth-child(9),
  .flame:nth-child(9)::after {
    animation-delay: 1.26s;
  }
  .flame:nth-child(9) {
    margin-left: 4.2em;
    margin-bottom: -2em;
  }
  .flame:nth-child(10),
  .flame:nth-child(10)::after {
    animation-delay: 1.4s;
  }
  .flame:nth-child(10) {
    margin-left: 1.8em;
    margin-bottom: -2.2em;
  }
  .flame:nth-child(11),
  .flame:nth-child(11)::after {
    animation-delay: 1.54s;
  }
  .flame:nth-child(11) {
    margin-left: 3.8em;
    margin-bottom: -2.2em;
  }
  .flame:nth-child(12),
  .flame:nth-child(12)::after {
    animation-delay: 1.68s;
  }
  .flame:nth-child(12) {
    margin-left: 0.2em;
    margin-bottom: -2em;
  }
  .flame:nth-child(13),
  .flame:nth-child(13)::after {
    animation-delay: 1.82s;
  }
  .flame:nth-child(13) {
    margin-left: 0.1em;
    margin-bottom: -2.1em;
  }
  .flame:nth-child(14),
  .flame:nth-child(14)::after {
    animation-delay: 1.96s;
  }
  .flame:nth-child(14) {
    margin-left: 2.1em;
    margin-bottom: -2.1em;
  }
  .flame:nth-child(15),
  .flame:nth-child(15)::after {
    animation-delay: 2.1s;
  }
  .flame:nth-child(15) {
    margin-left: 0.9em;
    margin-bottom: -1.6em;
  }
  @keyframes firecircle {
    0% {
      transform: translateY(0) scale(1);
    }

    100% {
      transform: translateY(-11em) scale(0);
    }
  }
  @keyframes fireafter {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
</style>