Liquid Animation Methods

Same cup, 6 different wave techniques — pick your favorite!

Method 1
CSS translateX
Wave path slides left/right
Method 2
SVG SMIL <animate d>
Wave path morphs between shapes
Method 3
Dual Overlapping Waves
Two waves at different speeds
Method 4
JS requestAnimationFrame
Real-time computed sine wave
Method 5
CSS Dual Counter-Waves
Two CSS waves moving opposite directions
Method 6
SMIL morph + vertical bob
Shape morph plus gentle vertical movement

Method 3 — Fill Demo

Click "Add Event" to watch it fill up. The wave stays connected to the liquid.

0%
Interior: y=270 → y=70
Range: 200px (70–270)