<div class="scotch-container">
    <div class="scotch-logo liquid-clip--hidden">
        <img class="scotch-logo__image" src="https://i.lensdump.com/i/A85R2i.png">
        <svg class="scotch-logo__liquid" viewBox="0 0 30 48">
            <defs>
                <clipPath id="clip-path--glass">
                    <path class="liquid__path-container" d="M 8.6 1.5 c 0 13.33 -4.17 20 -3.75 23.33 a 9.17 8.33 0 0 0 20.83 0 c 0.42 -3.33 -3.75 -10 -3.75 -23.33 Z"></path>
                </clipPath>
                <clipPath id="clip-path--liquid">
                    <path class="liquid__path liquid__path--top-clip" d="M -80 22 C -75.08 16 -69.08 16 -64.17 22 S -53.25 28 -48.33 22 S -37.42 16 -32.5 22 S -21.58 28 -16.67 22 S -5.75 16 -0.83 22 S 10.08 28 15 22 S 25.92 16 30.83 22 S 41.75 28 46.67 22 S 57.58 16 62.5 22 S 73.42 28 78.33 22 S 89.25 16 94.17 22 S 105.08 28 110 22 l 0 30 l -190 0"></path>
                </clipPath>
            </defs>
            <g clip-path="url(#clip-path--glass)">
                <circle class="liquid__drop liquid__drop--top liquid__drop--1" cx="18.3" cy="3.3" r="1.5"></circle>
                <circle class="liquid__drop liquid__drop--bottom liquid__drop--2" cx="12" cy="5" r="1.5"></circle>
                <path class="liquid__path liquid__path--top" d="M -80 22 C -75.08 16 -69.08 16 -64.17 22 S -53.25 28 -48.33 22 S -37.42 16 -32.5 22 S -21.58 28 -16.67 22 S -5.75 16 -0.83 22 S 10.08 28 15 22 S 25.92 16 30.83 22 S 41.75 28 46.67 22 S 57.58 16 62.5 22 S 73.42 28 78.33 22 S 89.25 16 94.17 22 S 105.08 28 110 22 l 0 30 l -190 0"></path>
                <path class="liquid__path liquid__path--bottom" d="M -70 24.5 C -65.92 18.5 -59.92 18.5 -55.83 24.5 S -45.75 30.5 -41.67 24.5 S -31.58 18.5 -27.5 24.5 S -17.42 30.5 -13.33 24.5 S -3.25 18.5 0.83 24.5 S 10.92 30.5 15 24.5 S 25.08 18.5 29.17 24.5 S 39.25 30.5 43.33 24.5 S 53.42 18.5 57.5 24.5 S 67.58 30.5 71.67 24.5 S 81.75 18.5 85.83 24.5 S 95.92 30.5 100 24.5 l 0 30 l -170 0"></path>
                <g class="liquid__path--clip-container" clip-path="url(#clip-path--liquid)">
                    <path class="liquid__path liquid__path--bottom-clip" d="M -70 24.5 C -65.92 18.5 -59.92 18.5 -55.83 24.5 S -45.75 30.5 -41.67 24.5 S -31.58 18.5 -27.5 24.5 S -17.42 30.5 -13.33 24.5 S -3.25 18.5 0.83 24.5 S 10.92 30.5 15 24.5 S 25.08 18.5 29.17 24.5 S 39.25 30.5 43.33 24.5 S 53.42 18.5 57.5 24.5 S 67.58 30.5 71.67 24.5 S 81.75 18.5 85.83 24.5 S 95.92 30.5 100 24.5 l 0 30 l -170 0"></path>
                </g>
            </g>
        </svg>
    </div>
</div>

body {
  margin: 0;
  padding-top: 50px;
  background: #242424;
}

.scotch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.scotch-logo {
  position: relative;
  cursor: pointer;

  &--active {

    .liquid__path, .liquid__drop {
      animation-play-state: running;
    }
  }
}

.scotch-logo__image {
  display: block;
  width: 30px;
}

.scotch-logo__liquid {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
}

// Code for liquid waves
.liquid__path {
  // Animation will be paused at first
  animation: 1.5s linear infinite paused;

  // First (top) wave
  &--top, &--top-clip {
    fill: #C8A343;
    transform: translateX(0);
    animation-name: liquid-top;
  }

  // Second (bottom) wave
  &--bottom, &--bottom-clip {
    fill: #E8CF7B;
    transform: translateX(-27px);
    animation-name: liquid-bottom;
    // Little phase shift respect the top wave
    animation-duration: 1.6s;
    animation-delay: -0.7s;
  }

  &--bottom-clip {
    fill: #A07A2E;
  }
}

// Animation for the top wave
@keyframes liquid-top {
  100% {
    transform: translateX(-31.66px);
  }
}

// Animation for the bottom wave
@keyframes liquid-bottom {
  100% {
    transform: translateX(1.66px);
  }
}

// Code for drops
.liquid__drop {
  animation: 4.5s ease-in-out infinite paused;

  // First drop
  &--1 {
    fill: #C8A343;
    transform: translate(0, 25px);
    animation-name: drop-1;
    animation-delay: 2s;
  }

  // Second drop
  &--2 {
    fill: #A07A2E;
    transform: translate(0, 25px);
    animation-name: drop-2;
  }
}

// Animation for the first drop
@keyframes drop-1 {
  20% { transform: translate(0, 25px); }
  40% { transform: translate(-2px, 10px); }
  60% { transform: translate(-4px, 25px); }
}

// Animation for the second drop
@keyframes drop-2 {
  20% { transform: translate(0, 25px); }
  40% { transform: translate(2px, 5px); }
  60% { transform: translate(4px, 25px); }
}


// Some styles for Firefox only, because it doesn't support clip-path animations

.scotch-logo.liquid-clip--hidden {

  .liquid__path--clip-container {
    display: none;
  }

  .liquid__path--bottom {
    fill: #A07A2E;
  }
}

(function() {

    var scotchLogo = document.querySelector('.scotch-logo');

    // Detect firefox
    if (!navigator.userAgent.match(/firefox/i)) {
        scotchLogo.className = 'scotch-logo';
    }

    // Resume animation on mouseenter
    scotchLogo.addEventListener('mouseenter', function () {
        scotchLogo.classList.add('scotch-logo--active');
    });
    
    // Pause animation on mouseleave
    scotchLogo.addEventListener('mouseleave', function () {
        scotchLogo.classList.remove('scotch-logo--active');
    });

})();