waterdrop.css

// css waterdrop https://codepen.io/antoniasymeonidou/pen/QWqpoMJ

<div class='center'>
<div class='blob'></div></div>

body {
  background: #e0e0e0;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blob {
  height: 150px;
  width: 150px;
  border-radius: 58% 43% 33% 64% / 50% 38% 53% 50%;
  background: transparent;
  box-shadow: inset 6px 33px 20px 0 #c9c9c9, inset 20px 80px 15px 0 #e0e0e0, 10px 20px 20px 0px #c9c9c9;
  animation: wobble 4s ease-in-out infinite alternate;
}

.blob::before {
  content: '';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}

@keyframes wobble {
  0% {
    border-radius: 58% 43% 33% 64% / 50% 38% 53% 50%;
  }
  50% {
    border-radius: 42% 58% 61% 39% / 60% 45% 55% 40%;
  }
  100% {
    border-radius: 54% 46% 40% 60% / 45% 60% 40% 55%;
  }
}