Progress Orb

How this effect works

The orb is a clipping trick: we clip() the canvas to a circle, and from then on anything we draw only exists inside the glass. The liquid is just a rectangle whose top edge sits at bottom − progress × height — clipped by the circle, it reads as fluid filling a sphere.

The ripples layer replaces the rectangle's flat top with two travelling sine waves (a taller slow one and a smaller faster one on top — one wave looks mechanical, two look wet). The waves keep moving even while progress pauses, which is what makes the orb feel like it holds a real liquid rather than a chart. The percentage sits in the glass, flipping from dark to light as the liquid passes behind it.