Liquid motion

Full motion specification

How the movement works

Use it for an organic, soft look in logos, backgrounds and connecting moves.

1. 01Lead circle (radius 44): moves 300 px right at 0.35–1.45 s with cubic-bezier(.7, 0, .2, 1), rising 34 px on a sine arc while moving; returns the same way at 2.7–3.8 s.
2. 02Seven circles follow the same path, each 0.065 s later, radius tapering 44→15, wobbling ±6 px vertically.
3. 03Even while it rests, three small circles (radius 15, 13, 11) move in and out between 34 and 64 px from it, twice per cycle.
4. 04Merged look: draw the circles in white → blur 9 px → threshold the alpha (soft only between 112 and 144) → fill what remains with colour.
5. 05Fill is a diagonal gradient mint → blue → violet (#7C5CFF), with a white elliptical highlight on the lead circle.