SVG ANIMATION STUDY

Seven currents, one harbor breathing.

Every wave below is hand-plotted SVG — no canvas, no video. Drag the moon, raise the wind, and watch high water climb the pier posts in real time.

HIGH WATER4.2 m
LOW WATER0.6 m
CYCLE06:12
North Pier: deep channel, tall range, ferries hold mid-tide.
drag the moon sideways — tides answer
NORTH PIERFLOOD · +1.2 kn
— flood currentmoon 65%chop 35%SVG only · zero images

Why SVG here

60 fps

Three layered wave paths recomputed each frame from sine sums. Crisp at any zoom, weightless on mobile GPUs.

Harbor range

3.6 m

Each harbor has its own bathymetry. Reef Gate doubles the chop; the Cove halves the range but quickens the cycle.

Tide clock

Flood

The amber bar tracks the 12-hour cycle. Slack water freezes the computation so you can inspect a single wave stack.

Craft notes — plotting the harbor

Three wave paths, one phase clock. What the dials actually move.

Moon math

High minus low equals range. Dragging the moon rewrites both ends at once.

Chop truth

Reef Gate multiplies chop by 1.6. The Cove halves it. Same slider, new harbor.

Slack water

Freezing the clock freezes the sum of sines. Inspect one stack, then resume.

Keyboard: press 1–3 for harbors, space to pause.

Offline promise

Double-click to open. All waves are path elements recomputed in place.

Why SVG, not canvas

Crisp at harbor-poster zoom and cheap on mobile GPUs. Dashed currents come free.