I need to generate a fill effect by CSS, CANVAS or SVG, which is performed on the PNG image that I have.
The filling can be horizontal or vertical. It must be about the image.
Expected : The effect does not necessarily have to be like a "wave", it can be vertical.
img {
width: 300px;
height: 100px;
}
img.filtered {
filter: sepia(120%) hue-rotate(190deg) saturate(1000%) contrast(100%);
}
<img src="https://isstatic.aoverflow.com/co367.png" alt=" acío" />
<img class="filtered" src="https://isstatic.aoverflow.com/co367.png" alt="Lleno"/>
Since you tell me that it can be horizontal, you can use the ::before pseudo-element in the image container, place it below the image, position it below with a bottom:0 and parameterize the height using a Css-var, for example: --liquid-height: 20% and with javascript you change the variable in the style line of the parent element, the variable like this:
If you want, you can give the before element a small rotation movement of 2 degrees, to simulate that it is a liquid, or use 2 pseudo-elements to simulate a slightly more realistic wave. Here is a pen with an example:
Codepen: Simulation of liquids only css
Now I can think of two variants from the above:
1) Instead of using a flat color for the liquid, use a gif for the background that simulates ripple.
2) Another thing you can do is simulate water using canvas, like here: water canvas 1 codepen and here: water canvas 2 codepen or with an svg, but that's beyond my knowledge.
Update
Do not use the image of your example, because it turns out that your image is not transparent, since it is not, the waves will never be seen "behind", however, I give you an example of how you can control the variables using js, in this case jquery .
In the html, if you parse it just remove the spans and I did the same in the css, any class related to these (with the "box" class) remove them.
Look at the comments inside the css, I put the properties that make one element be on top of another, in this case it is z-index: N; the higher the number "N" the higher it will be.
Oh and add the property mix-blend-mode: mulitply, or fusion mode: multiply, which if you have experience using photoshop, what it does is that it makes the colors transparent the lighter or more saturated they are, in the case of white it makes it completely transparent , that's why I used it, but I don't recommend it, it is best that the image you use is transparent so that you can see the waves of the water.