SOURCE

<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <path d="M 50 100 h 400" stroke="black" stroke-width="2" fill="none"/>
  <animate attributeName="d" dur="2s" repeatCount="indefinite"
         from="M 50 100 h 400" to="M 50 120 h 400"/>
         <circle cx="50" cy="100" r="5" fill="blue" class="svg-water-drop"/>
</svg>

@keyframes flow {
  0% {transform: translateX(0);}
  100% {transform: translateX(400px);}
}

.svg-water-drop {
  animation: flow 2s infinite;
}