.container
  .reflection
  svg(viewBox="0 0 738 800", fill="none", xmlns="http://www.w3.org/2000/svg")
    path(
      d="M307 56.5C307 51.2533 311.253 47 316.5 47H489.5C494.747 47 499 51.2533 499 56.5C499 61.7467 494.747 67 489.5 67H316.5C311.253 67 307 61.7467 307 56.5Z",
      fill="#EEF8FF",
      fill-opacity="0.8"
    )
    path(
      d="M489.5 67H316.5L319 141.474C344.723 130.235 373.134 124 403 124C432.866 124 461.277 130.235 487 141.474L489.5 67Z",
      fill="#EEF8FF",
      fill-opacity="0.8"
    )
    path(
      d="M613 333C613 448.98 518.98 543 403 543C287.02 543 193 448.98 193 333C193 217.02 287.02 124 403 124C518.98 124 613 217.02 613 333Z",
      fill="#EEF8FF",
      fill-opacity="0.8"
    )
    path#flame(
      ,
      d="M464 657C464 686.823 437.361 711 404.5 711C371.639 711 345 686.823 345 657C345 627.177 381 588.5 404.5 565C426 588 464 627.177 464 657Z",
      fill="#F2C34A"
    )
    path#flame(
      ,
      d="M449 670.315C449 692.785 428.853 711 404 711C379.147 711 359 692.785 359 670.315C359 647.845 386.227 618.705 404 601C420.261 618.329 449 647.845 449 670.315Z",
      fill="#F24A4A"
    )
    path#flame(
      ,
      d="M426 691.397C426 702.224 416.374 711 404.5 711C392.626 711 383 702.224 383 691.397C383 680.571 396.008 666.531 404.5 658C412.269 666.349 426 680.571 426 691.397Z",
      fill="#4A6FF2"
    )
    path(
      fill-rule="evenodd",
      clip-rule="evenodd",
      d="M146 6C146 2.68629 143.314 0 140 0H112C108.686 0 106 2.68629 106 6.00002V64.677C91.1602 70.3528 79.3528 82.1602 73.677 97H6C2.68628 97 0 99.6863 0 103V128C0 131.314 2.68631 134 6 134H72.6269C77.7957 150.242 90.1734 163.27 106 169.323L106 761H6C2.68628 761 0 763.686 0 767V794C0 797.314 2.68628 800 6 800H732C735.314 800 738 797.314 738 794V767C738 763.686 735.314 761 732 761L146 761L146 169.323C161.827 163.27 174.204 150.242 179.373 134H518C521.314 134 524 131.314 524 128V103C524 99.6863 521.314 97 518 97H178.323C172.647 82.1602 160.84 70.3528 146 64.677V6Z",
      fill="#C4C4C4"
    )
    rect(x="321", y="711", width="164", height="50", rx="21", fill="#FBFBFB")

  .liquid
    - for (var i=0; i<10; i++)
      .bubble
    .wave

* {
  box-sizing: border-box;
}

:root {
  --size: 100;
  --unit: calc((var(--size) / 300) * 1vmin);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c1f2ee;
}

.container {
  height: calc(250 * var(--unit));
  width: calc(250 * var(--unit));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .reflection {
    position: absolute;
    right: 32%;
    bottom: 48%;
    border-right: 15px solid white;
    border-radius: 50%;
    z-index: 10;
    height: 15%;
    width: 5%;
    opacity: 0.7;
  }

  svg {
    height: 70%;
  }

  .liquid {
    position: absolute;
    bottom: 39.5%;
    left: 37%;
    width: calc(81 * var(--unit));
    height: calc(81 * var(--unit));
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(
      180deg,
      rgba(233, 73, 210, 0) 30%,
      rgba(162, 60, 209, 1) 57%,
      rgba(118, 4, 190, 1) 66%,
      rgba(72, 26, 120, 1) 74%,
      rgba(29, 8, 62, 1) 100%
    );

    .wave {
      z-index: 0;
      position: absolute;
      bottom: 0%;
      width: 1000%;
      height: 90%;
      opacity: 0.6;
      background-image: url("https://assets.codepen.io/3879263/Union.svg");
    }

    .bubble {
      width: calc(5 * var(--unit));
      height: calc(5 * var(--unit));
      background: transparent;
      border-radius: 50%;
      position: absolute;
      bottom: -5%;
      left: 45%;
      border: 1px solid white;
      z-index: 5;
    }
  }
}

let bubbles = document.querySelectorAll(".bubble");
let fire = document.querySelectorAll("#flame");

gsap.to(bubbles, {
  opacity: "random(0, 0.5)",
  top: 10,
  x: "random(-50,50)",
  scale: "random(.2, 1.5)",
  duration: 2,
  stagger: {
    amount: 10,
    each: 1,
    repeat: -1
  }
});

gsap.from(fire, {
  duration: 0.5,
  rotation: 5,
  ease: "steps(5)",
  transformOrigin: "bottom",
  yoyo: true,
  repeat: -1
});

gsap.to(".wave", {
  duration: 30,
  ease: "none",
  right: 0,
  yoyo: true,
  repeat: -1
});