Line Draw Particles
A line written by a moving head, made of the grains it settles behind it.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
/**
* Vibary · Line Draw Particles
*
* A line drawn by a moving head, made of the grains it leaves behind.
*
* The technique: the line's width is a consequence of its age. A grainAbout this effect
For a figure that should arrive rather than appear — a sparkline on a metric card, a trend on a report, a route being traced. The line's width is a consequence of its age: a grain is laid at the nib with a small sideways velocity and stopped by one damping constant, so the spread it has by a given moment is a hairline where it was just laid and its full grainy width a fixed time later. Because the head is moving, that time is a distance, and the stroke tapers from sharp to soft over a run behind the nib that measures 50px at the slow setting and 150px at the fast one. Nothing tunes a taper; it falls out of the same two numbers that set the width and the speed, and a stroke that sharpens at its tip is the tell that a line is being written rather than uncovered. The head travels by arc length rather than by curve parameter, so it holds one speed through the straights and the corners alike — stepping a spline by its parameter makes the nib race down the flats and crawl round the bends, and the grain density inherits the error. Grains never move again once settled and never fade: they are the line, not a trail over one.