How to make a water fill effect in SVG?

Question

Layout

Expensive time of day.
I have text in SVG . Please tell me how can I make the text fill with water effect on hover? Not from bottom to top, but from left to right.
THIS example does not work :(

Or at least it just filled from left to right, without the water effect.

Answer 1

Either you don't have an img task and you are trying to call it for some reason, or (more likely) you are trying to call it before you declare it. And you must first declare the img task, and only then pull it.
UPD, I'm sorry, I mistyped it originally. Of course, the error can be if you try to call the task BEFORE the declaration, and not after.

Answer 2

If you don't need to output the text from the backend to SVG then convert it to curves and "THIS example doesn't work :(" - it will work too.

Answer 3

Tags: animation, svg
Header: Water Waves Animation
Learn more:
https://codepen.io/evatoth/pen/xwZoNa