JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Beer Mug Fill</title>
  <style>
    body {
      background: #f9f1db;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    svg {
      width: 200px;
      height: auto;
    }
  </style>
</head>
<body>

<svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
  <!-- Define the clip path for the mug's interior -->
  <defs>
    <clipPath id="beerMask">
      <!-- Adjust this to match the inner fill area of the mug -->
      <rect id="fillRect" x="30" y="40" width="40" height="100" rx="5" />
    </clipPath>
  </defs>

  <!-- Beer fill (masked to mug shape) -->
  <g clip-path="url(#beerMask)">
    <rect id="beer" x="30" y="140" width="40" height="0" fill="#f6c32e" />
  </g>

  <!-- Mug outline -->
  <rect x="30" y="40" width="40" height="100" rx="5" fill="none" stroke="black" stroke-width="2"/>
  <!-- Handle -->
  <path d="M70 50 Q85 75 70 100" fill="none" stroke="black" stroke-width="5" stroke-linecap="round"/>
</svg>

<script>
  const beer = document.getElementById('beer');
  let fillLevel = 0;
  function animate() {
    if (fillLevel <= 100) {
      const height = fillLevel;
      beer.setAttribute('y', 140 - height);
      beer.setAttribute('height', height);
      fillLevel += 0.5;
      requestAnimationFrame(animate);
    }
  }
  animate();
</script>

</body>
</html>