Sylvia Plath · 1956–1963
A Life in One Line
Seven years, two hundred and seventy-four poems — a whole life drawn as one unbroken line that runs out in the winter of 1963.
“A Life in One Line” is a scroll-driven portrait of Sylvia Plath that opens as a single continuous-line drawing of her face above her signature. As the reader scrolls, the drawing comes apart: one strand of the line peels away, straightens and re-forms into a year, from 1956 to 1963, while the remaining face grows fainter and each year surfaces its key events and poems. The idea is a metaphor made literally true in code — the life is drawn from a finite amount of line, so every year is made out of the face rather than added to it, and by 1963 the line has run out. It deliberately keeps that small, honest idea over an earlier, busier design.
How it was made
The data
The piece is built from seven years, eight line-strands, forty hand-written events and roughly 251 poem titles. The poems were OCR-extracted from a PDF of The Collected Poems, split into per-poem files and assigned to a year from the book’s own chronology, then topped up with 27 uncollected titles named in Heather Clark’s biography Red Comet. The forty events, five per year, are prose drawn from Red Comet, and five real Plath photographs are inlined directly into the page.
Built with
- scrollama
- SVG
- three.js
- Python
A trace pipeline in Python turns the portrait PNG into one ordered path — thresholded to an ink mask, skeletonized to a one-pixel centreline, then simplified to about 2,300 points — which the browser animates with SVG’s getTotalLength / getPointAtLength and stroke-dashoffset. Everything renders through a single pure function of scroll progress (scrollama in progress mode), so the unravelling is perfectly reversible. A small three.js layer falls the background photographs.
Problems, and how I solved them
-
The problemA PNG line drawing has no idea in what order the pen travelled, but “unravelling” the line on scroll needs exactly that stroke order.
The fixThe trace pipeline thresholds the image to an ink mask, skeletonizes it to a one-pixel centreline, walks the pixel graph into 849 fragments and reorders them with a greedy nearest-neighbour walk starting at the crown of the head.
-
The problemThe traced path was tens of thousands of points — far too heavy to inline and animate smoothly in the browser.
The fixA hand-written Douglas–Peucker simplification dropped every point within about a pixel of its own line, cutting the path to roughly 2,300 points, small enough to inline and animate.
-
The problemEach strand of the face had to visibly become the digits of a year, not merely fade and have a number appear.
The fixThe path is cut into eight arc-length strands, and each strand and its target digit shapes are sampled to the same number of points and linearly interpolated point-to-point every frame, exploiting that both read as squiggles.
-
The problemScrolling back and forth had to stay perfectly in sync, and hand-drawn frames must not shimmer as they re-randomise each frame.
The fixEverything routes through one render(year, progress) function with no timers or tween state, and the sketchy frames use a seeded pseudo-random generator so their wobble is deterministic.