svg animation beaker

beaker.html

<svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg" width="512" height="512">
  <defs>
    <!-- Brand Gradient -->
    <linearGradient id="brand-gradient" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" stop-color="#d79f2a"/>
      <stop offset="100%" stop-color="#d34675"/>
    </linearGradient>
  </defs>

  <style>
    .beaker {
      fill: url(#brand-gradient) !important;
      stroke: #d79f2a;
      stroke-width: 0.5;
    }

    .dot {
      animation: floatDots 3s infinite ease-in-out;
      opacity: 0.8;
    }

    @keyframes floatDots {
      0%   { 
        transform: translateY(0);
        fill: #d79f2a;
      }
      50%  { 
        transform: translateY(-40px);
        fill: #d34675;
      }
      100% { 
        transform: translateY(-80px);
        fill: #d34675;
        opacity: 0;
      }
    }

    .neck {
      fill: none;
      stroke: #d79f2a;
      stroke-width: 0.5;
    }

    /* Two wave classes with slightly different horizontal animations */
    .wave1 {
      animation: wave1Anim 2s infinite ease-in-out;
      transform-origin: center;
    }
    .wave2 {
      animation: wave2Anim 2s infinite ease-in-out;
      transform-origin: center;
    }

    @keyframes wave1Anim {
      0%, 100% { transform: translateX(0); }
      50%      { transform: translateX(2px); }
    }
    @keyframes wave2Anim {
      0%, 100% { transform: translateX(0); }
      50%      { transform: translateX(-2px); }
    }

    .wave3 {
      animation: wave3Anim 4s infinite ease-in-out;
      transform-origin: center;
    }
    @keyframes wave3Anim {
      0% {
        transform: translateX(-3px);
      }
      50% {
        transform: translateX(3px);
      }
      100% {
        transform: translateX(-3px);
      }
    }

    .glass-outline {
      fill: none;
      stroke: rgba(255, 255, 255, 0.3);
      stroke-width: 0.5;
    }
  </style>

  <!-- Glass Neck (open top, wider) -->
  <path class="neck"
        d="M 35 5 L 35 20
           M 65 5 L 65 20" />

  <!-- Glass Neck Outline -->
  <path class="glass-outline"
        d="M 33 5 L 33 20
           M 67 5 L 67 20" />

  <!-- Beaker Body with Liquid Wave -->
  <path class="beaker"
        d="M 35 20 L 65 20
           L 80 100
           L 85 130 Q 85 140 75 140
           L 25 140 Q 15 140 15 130
           L 20 100 Z" />

  <!-- Glass Beaker Outline -->
  <path class="glass-outline"
        d="M 33 20 L 67 20
           L 82 100
           L 87 130 Q 87 142 77 142
           L 23 142 Q 13 142 13 130
           L 18 100 Z" />

  <!-- Three Animated Waves (even smaller amplitude) -->
  <path class="beaker wave1"
        d="M 35 20
           Q 42 21 50 20
           Q 58 19 65 20" />
  <path class="beaker wave2"
        d="M 35 20.5
           Q 42 21.5 50 20.5
           Q 58 19.5 65 20.5" />
  <path class="beaker wave3"
        d="M 35 21
           Q 42 22 50 21
           Q 58 20 65 21" />

  <!-- Floating Dots -->
  <g>
    <circle class="dot" cx="40" cy="120" r="2" style="animation-delay:0s" />
    <circle class="dot" cx="50" cy="120" r="3" style="animation-delay:0.4s" />
    <circle class="dot" cx="60" cy="120" r="2" style="animation-delay:0.8s" />
    <circle class="dot" cx="45" cy="120" r="2" style="animation-delay:1.2s" />
    <circle class="dot" cx="55" cy="120" r="2" style="animation-delay:1.6s" />
    <circle class="dot" cx="35" cy="120" r="2" style="animation-delay:2s" />
  </g>
</svg>