water

by jpeter06

HTML

<button>
desactivar
</button>
<button>
activar
</button>
<svg width="350px" height="100px" viewBox="0 0 800 100">
  <defs>
     <mask id="deposit_mask">
      <path d="M 0,0 H 300 V 100 H 30  z"  fill="red" />
    </mask>
      <pattern id="water" width=".25" height="1.01" 
          patternContentUnits="objectBoundingBox">
        <path fill="blue" class="waterMove"
        d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
      </pattern>
  </defs>
   <rect class="water-fill" mask="url(#deposit_mask)" fill="url(#water)" x="-400" y="0" width="1600" height="120"/>
   
   </svg>
   
   <svg width="350px" height="100px" viewBox="0 0 300 100">
  <defs>
     <mask id="deposit_mask">
      <path d="M 0,0 H 300 V 100 H 30  z"  fill="red" />
    </mask>
      <pattern id="water" width=".25" height="1.01" 
          patternContentUnits="objectBoundingBox">
        <path fill="blue" 
        d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
      </pattern>
      <clipPath id="depositoUpMask">  
        <path  stroke-width="0"
        d="m -0.07127002,0.00478529 0.03321,13.51248071 37.29558802,0.01215 6.74913,-13.46171772 z"
        />   
      </clipPath> 
  </defs>

   
   <rect  clip-path="url(#depositoUpMask)" fill="url(#water)" 
class="liquido depositoSup"  x="0" y="4" width="300" height="60"  />
   </svg>

CSS

html,body{
  background:#ddd;
  --water-deposit-color: rgb(40, 105, 114);
}


.water-fill{
 animation: wave 0.7s infinite linear;
}

@keyframes wave {
  from {x: -400px;}
  to {x: 0;}
}

.depositoSup{
    animation: fillEmptySup  4.7s infinite ease-out alternate;
}
@keyframes fillEmptySup { /* desde 0 a 14 px */
    from {y: 14px;}
    to {y: 0;}
}

.deposito{
    fill:none;
    stroke-width: 0.3;
}

.liquido{
    stroke:none;
    
}

.asdf{
  d: path("M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z")
}