Spike type

One word sits in the middle of a pale grey card, set heavy, white inside and outlined in ripe yellow, with its boundary chewed ragged and hundreds of fine spikes growing out of it. The spikes are the same white as the letters, because they are not separate objects: the word and its spikes are one shape, and one outline wraps the lot. It is nearly still. The density of the drawing is the subject.

The letterform is rasterised from the live face and traced into closed contours, and only then roughened, so the spikes grow from the chewed edge and inherit its irregularity. A spike is a stroke that goes out and comes back, not a triangle. Each one walks a wandering spine outward, and its two walls are offset from that spine by a half-width that tapers to nothing at the tip, so a bending spike becomes a hooked, lopsided sliver. Every spike is ray-tested against the letter raster at build time, clamped before it runs into another letter, and keeps the room it had left in front of it.

Everything expensive happens once per size. Each frame only scales and rotates already-built local paths, one per spike, so a thousand spikes stay affordable. The spikes breathe on a slow per-spike phase, 0.55 radians a second, swelling their length by up to 10% and swaying a little.

Under a fine pointer, spikes within 0.3 of the height bend away on a spring whose stiffness depends on their length, so long ones swing slowly and stubble pops and stops. A spike with room in front of it also grows into that room, and each letter leans a little toward the pointer on its own spring. The outline near the pointer warms from yellow toward leaf green through a 24-step ramp. The draw is one nonzero fill of every subpath for the mark, then the outline in short runs of nine points with their own widths, then the ground behind everything with destination-over.

• Rasterise the word in the live face at WEIGHT 700, sized to leave room for the spikes, and trace it into closed contours.
• Roughen each contour after the trace, group contours into letters by horizontal overlap, and grow a spike every EVERY points.
• Build each spike as a closed sliver in local space around a wandering spine, ray-tested against the raster so it stops short of other letters.
• Each frame, scale and rotate each spike's local path by its breath, sway and sprung pointer bend; never regrow it.
• Fill every subpath once for the mark, stroke the outline in RUN-point segments with precomputed widths, then fill the ground behind with destination-over.
• Under reduced motion, draw one frame at rest with no pointer.

• WORD (melon): The word. Short words with round letters give the spikes the most edge.
• PALETTE (ground #e4e4e8, mark #ffffff, line #ffc21e): The ground, the letters and spikes, and the outline.
• MAX_LEN (0.26): The longest spike, as a fraction of the card's height.
• EVERY (3): Edge points between spike roots. Lower is denser.
• BREATH_AMT, BREATH_RATE (0.1, 0.55): How much and how fast the spikes breathe.
• REPEL (0.34): How far the pointer bends spikes, in radians.
• HUE_TO (104): The hue the outline warms to under the pointer.
• FONT_VAR (--visual-sans): The CSS variable holding the font family.