SVG water fill animation

Question

I am to get a wipe animation to look like water is filling up inside of a drop. It currently is a square with a wave animation over top of the drop logo. It does the wave animat

Answer 1

The following modifies your code to:

• remove the viewport (I just find it easier to use transform),
• make a copy of both the drop and the "h" letter,
• merge the copies into a single path,
• place that merged path inside a element inside a element in the and give it an id ("drop")
• place an enclosing element around the group,
• clip that enclosing element using the "drop", and
• scale and translate both the black-bordered drop-and-h as well as the clip path drop-and-h by the same amounts so that they are centered on the waveshape.

You can read about clipPath on MDN.

By the way, note that your wave shape animation may continue forever even if you can't see the waves sloshing around any more (though I didn't check this rigorously), which is probably not what you want.