Killing Eve title animation

<svg id="titleSvg" aria-label="Killing Eve" viewBox="0 0 1200 800">
  <path
    class="title"
    d="M201.474 160.183h-43.295l-38.627 125.003V160.183H76v399.999h43.552V435.179l38.627 125.003h43.295l-43.295-199.85zM257.987 560.182h-43.552V160.183h43.552zM314.5 510.07V160.183h-43.552v399.999h76.697V510.07zM404.16 510.07V160.183h-43.551v399.999h76.696V510.07zM493.818 560.182h-43.553V160.183h43.553zM579.11 160.183v144.043l-28.778-144.043h-43.553v399.999h43.553V427.234l28.778 132.948h43.55V160.183zM718.794 302.969c0 4.143-1.382 7.657-4.146 10.54-2.766 2.882-6.223 4.324-10.371 4.324-3.975 0-7.345-1.442-10.109-4.324-2.767-2.883-4.149-6.397-4.149-10.54v-87.11c0-4.145 1.382-7.658 4.15-10.541 2.763-3.063 6.133-4.594 10.108-4.594 4.148 0 7.605 1.531 10.371 4.594 2.764 2.883 4.146 6.396 4.146 10.54zM690.02 462.885c0-4.144 1.382-7.748 4.15-10.81 2.763-2.884 6.133-4.326 10.108-4.326 4.148 0 7.605 1.442 10.371 4.325 2.764 3.063 4.146 6.667 4.146 10.811v41.621c0 4.145-1.382 7.658-4.146 10.541-2.766 2.883-6.223 4.324-10.371 4.324-3.975 0-7.345-1.441-10.109-4.324-2.767-2.883-4.149-6.396-4.149-10.54zm72.639-326.58c-19.042-.107-37.492 14.822-43.604 25.474 0 0-5.445-1.596-14.777-1.596-16.072 0-29.81 5.946-41.218 17.838-11.58 11.892-17.37 26.306-17.37 43.243v76.299c0 11.351 2.852 21.892 8.554 31.621-5.874 5.586-10.022 12.163-12.443 19.73a40.173 40.173 0 00-1.814 7.568c-.171.72-.26 1.531-.26 2.432v1.351c0 7.748 1.47 14.865 4.409 21.352a48.637 48.637 0 008.812 12.703l2.335 1.892c-1.88 3.02-9.074 6.01-9.972 17.333-1.874 28.485.378 56.97.378 85.556 0 16.757 5.791 31.171 17.37 43.243 11.408 11.892 25.147 17.838 41.218 17.838 16.246 0 30.074-5.946 41.479-17.838 11.582-12.072 17.37-26.486 17.37-43.243v-30.81c0-16.757-5.703-69.647-17.11-81.54-11.233-12.071-24.886-18.197-40.96-18.377-12.961-.18-19.528-.271-19.702-.271-5.356 0-8.037-2.072-8.037-6.216 0-3.964 2.506-6.126 7.52-6.486h1.035c1.728.18 3.284.63 4.666 1.35 4.667 1.262 9.248 1.893 13.74 1.893 16.245 0 30.073-5.946 41.478-17.838 11.582-12.072 17.37-26.486 17.37-43.243v-76.3c1.008-16.266-6.989-30.073-14.776-37.453-.757-3.464-.953-7.862.894-10.72 1.946-3.013 7.408-6.87 13.713-6.508zM885.491 210.295v-50.112h-76.695v399.999h76.695V510.07h-33.143V385.387h33.143v-50.111h-33.143V210.295zM991.388 160.183l-21.775 200.149-21.518-200.149h-43.553C918.353 298.79 948.8 461.17 970.362 600c19.033-138.83 49.479-301.211 64.573-439.817zM1124.601 210.295v-50.112h-76.703v399.999h76.703V510.07h-33.143V385.387h33.143v-50.111h-33.143V210.295z"
  />
  <g id="drip3" class="drip">
    <rect x="967.258" y="0" width="5" height="350" />
    <path
      d="M968.312 345.095c-.858 6.871-5.056 10.852-5.212 15.858.355 4.356 3.567 7.463 6.672 7.401 3.204-.063 6.452-2.977 6.664-7.48-.093-5.178-4.555-9.508-5.08-15.741 0 0-.013-2.304-1.52-2.3-1.526.016-1.524 2.262-1.524 2.262z"
    />
  </g>
  <g id="drip1" class="drip">
    <rect x="117.482" y="-63.355297" width="5" height="350" />
    <path
      d="M118.536 281.74c-.858 6.87-5.056 10.852-5.212 15.857.355 4.357 3.567 7.463 6.672 7.402 3.204-.063 6.452-2.977 6.664-7.48-.093-5.178-4.555-9.508-5.08-15.742 0 0-.013-2.303-1.52-2.3-1.526.016-1.524 2.263-1.524 2.263z"
      opacity="1"
    />
  </g>
  <g id="drip2" class="drip">
    <rect x="576.13751" y="-45.964664" width="5" height="350" />
    <path
      d="M577.191 299.13c-.857 6.872-5.055 10.852-5.211 15.858.355 4.357 3.567 7.463 6.671 7.402 3.204-.063 6.453-2.977 6.665-7.48-.093-5.178-4.556-9.509-5.08-15.742 0 0-.014-2.303-1.521-2.3-1.525.016-1.524 2.263-1.524 2.263z"
    />
  </g>
  <g id="drip4" class="drip">
    <rect x="967.72217" y="496.97711" width="5" height="101.69997" />
    <path
      d="M968.72 592.036c-.858 6.871-5.056 10.852-5.212 15.858.355 4.356 3.567 7.463 6.672 7.401 3.204-.063 6.452-2.977 6.664-7.48-.093-5.178-4.555-9.508-5.08-15.741 0 0-.013-2.304-1.52-2.3-1.526.016-1.524 2.262-1.524 2.262z"
    />
  </g>
</svg>

<button title="Mute sound">
	<svg class="mute-on" viewBox="0 0 24 24" aria-label="Mute on">
		<path
			d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"
		></path>
	</svg>

	<svg class="mute-off hide" viewBox="0 0 24 24" aria-label="Mute off">
		<path
			d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"
		></path>
	</svg>
</button>

:root {
  --animation-timing: 4s;
  --text-color: rgb(255 255 255);
  --background-color: red;
  --transition-timing: 0.4s;
}

* {
  box-sizing: border-box;
}

html {
  background-color: var(--background-color);
  transition: background-color var(--transition-timing);
}

body {
  height: 100dvh;
  perspective: 1100px;
}

#titleSvg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  transform-origin: center;
}

#bg {
  fill: var(--background-color);
  transition: fill var(--transition-timing);
}

.title {
  fill: var(--text-color);
  transition: fill var(--transition-timing);
}

.drip {
  fill: var(--background-color);
  opacity: 0;
}

#drip4 {
  fill: var(--text-color);
}

button {
  --size: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);

  position: fixed;
  top: 0.65rem;
  right: 0.5rem;

  width: var(--size);
  height: var(--size);

  background-color: white;

  border: none;
  border-radius: 50%;
}

button svg {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

button path {
  fill: black;
}

.hide {
  display: none;
}

let audioTracks = [
  new Audio("audio/killer-shangrilah-sample.mp3"),
  new Audio("audio/xpectations-sample.mp3"),
  new Audio("audio/voodoo-voodoo-sample.mp3"),
];

let track;
let dripDuration = 5;

// audio toggle
let muteButton = document.querySelector("button");
let muteOnIcon = muteButton.querySelector(".mute-on");
let muteOffIcon = muteButton.querySelector(".mute-off");
let muted = true;

muteButton.addEventListener("click", toggleMute);

async function toggleMute() {
  // initiate playing the song if it was blocked
  if (track.currentTime === 0) {
    await play();
  }

  muteOnIcon.classList.toggle("hide");
  muteOffIcon.classList.toggle("hide");

  track.muted = !track.muted;
  muted = !muted;
}

async function play() {
  track.volume = 0.3;
  track.currentTime = 0;
  track.muted = muted;

  try {
    await track.play();
  } catch (error) {
    console.error(error);
  }
}

function getRandomNumber() {
  return Math.floor(Math.random() * 4) + 1;
}

function setRandomAudio() {
  let randomSelection = Math.floor(Math.random() * audioTracks.length);
  track = audioTracks[randomSelection];
  track.volume = 0.5;
  track.muted = !muteButton.checked;
}

function setRandomColorSet() {
  let colorSets = [
    { bg: "#2fc2ba", text: "#ceccb5" },
    { bg: "#202f3c", text: "#f4f5d7" },
    { bg: "#0c4734", text: "#fbfbdb" },
    { bg: "#050506", text: "#6a7a88" },
    { bg: "#92a1b0", text: "#1a3346" },
    { bg: "#040404", text: "#3d513d" },
    { bg: "#ababa3", text: "#667465" },
    { bg: "#6e6d62", text: "#bb9b4e" },
    { bg: "#43738b", text: "#f09daf" },
    { bg: "#040404", text: "#af8946" },
  ];

  let randomSelection = Math.floor(Math.random() * colorSets.length);
  let colorSet = colorSets[randomSelection];

  let root = document.documentElement;
  root.style.setProperty("--background-color", colorSet.bg);
  root.style.setProperty("--text-color", colorSet.text);
}

function runDripAnimation() {
  const random = getRandomNumber();
  setRandomColorSet();
  setRandomAudio();

  gsap.set("#titleSvg", { z: -100 });

  let tl = new TimelineMax({
    delay: 0.3,
    onStart: async () => {
      await play();
    },
    onComplete: () => {
      track.pause();
    },
  });
  tl.to(`#drip${random}`, {
    duration: 0.01,
    opacity: 1,
  });
  tl.to(
    "#titleSvg",
    {
      duration: dripDuration,
      ease: "none",
      z: 0,
    },
    "drip"
  );
  tl.to(
    `#drip${random} rect`,
    {
      duration: dripDuration,
      ease: "none",
      y: 75,
    },
    "drip"
  );
  tl.to(
    `#drip${random} path`,
    {
      duration: dripDuration,
      ease: "none",
      scaleY: 1.3,
      y: 52,
      delay: 0.1,
    },
    "drip"
  );
  tl.to(
    `#drip${random}`,
    {
      duration: 0.05,
      opacity: 0,
    },
    "reset"
  );
  tl.to(
    `#drip${random} rect`,
    {
      duration: 0.05,
      y: 0,
    },
    "reset"
  );
  tl.to(
    `#drip${random} path`,
    {
      duration: 0.05,
      scaleY: 1,
      y: 0,
    },
    "reset"
  );
  tl.to(
    "#titleSvg",
    {
      duration: 0.05,
      z: -100,
    },
    "reset"
  );
}

runDripAnimation();
setInterval(runDripAnimation, 5500);