html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #0aabff;
  display: flex;
}

.water {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.3), 15px 20px 20px rgba(0, 0, 0, 0.1), 10px 10px 20px rgba(0, 0, 0, 0.5) inset, -10px -15px 20px rgba(255, 255, 255, 0.3) inset;
  animation: changeRadius 8s linear 0s alternate infinite;
}

.water::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 28%;
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 30% 70% 45% 55% / 30% 30% 70% 70%;
  filter: blur(2px);
}

@keyframes changeRadius {
  25% {
    border-radius: 30% 70% 45% 55% / 30% 30% 70% 70%;
  }
  50% {
    border-radius: 55% 45% 45% 55% / 30% 30% 70% 70%;
  }
  75% {
    border-radius: 65% 35% 45% 55% / 30% 53% 47% 70%;
  }
  100% {
    border-radius: 66% 34% 61% 39% / 49% 70% 30% 51%;
  }
}