ROOM 02 / 05 — THE SVG TOOLSET

INK

Three instruments from the svg namespace — createDrawable, createMotionPath, morphTo — treated as brush, hand, and water. Every mark on this page is a hand-authored bezier; the engine supplies only the time.

EXHIBIT 02·A — THE PAINTING · CREATEDRAWABLE × CREATEMOTIONPATH

Twenty-two strokes in painter’s order, one timeline. A single drop of ink rides the tip of every stroke — each path drives both its own reveal and the drop’s travel, so the drop always leads the line. The vermilion seal is struck last.

CRANE, REEDS, DISTANT RIDGE — 22 DRAWABLES · 1 TIMELINE · 1 DROP

EXHIBIT 02·B — METAMORPHOSIS · SVG.MORPHTO

One path, four silhouettes. morphTo resamples the current form and the next into matched point sets, so koi becomes crane becomes mountain becomes moon — and back — without a cut.

EXHIBIT 02·C — THE HAND · AN EASING STUDY

The same character — 水, water — drawn three times with identical strokes. Only ease and duration change. Linear is a plotter; inOut(3) loads and releases like a wrist; outExpo strikes fast and feathers the exit. Easing is the hand.

01 — LINEAR700 MS / STROKE

Constant speed. No entry, no weight, no exit — the machine’s hand.

02 — INOUT(3)700 MS / STROKE

Loads the stroke, commits through the middle, releases the tip — the student’s hand.

03 — OUTEXPO420 MS / STROKE

Strikes at once, then feathers — the master’s flick.

SAME PATHS · SAME ORDER · ONLY EASE + DURATION DIFFER