A dip pen writes italic and uncial letters; thick and thin come from the nib angle.
There is no font: each letter of an italic and an uncial hand is a few stroke skeletons joined by centripetal Catmull-Rom splines, and a broad nib (a short segment held at a fixed angle) sweeps along them, filling the quadrilateral between each pair of positions. Strokes across the nib edge come out at full width and strokes along it become hairlines, so the whole page restyles when the angle turns. The ink sits on generated laid paper through a multiply blend, pools where the pen starts and stops and dries with a darker rim, wicks into the paper fibers in fine hairs, and keeps a glossy sheen while wet that fades as it dries. The pen slows into curves, lifts between strokes and goes back to the inkwell when it runs dry.
Try it. Drag on the paper to write with the nib yourself (hold Shift or right-drag for vermilion). Drag the dial in the corner or press the arrow keys to turn the nib and watch every letter reflow. Press N for a new page and R to reset the angle.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a broad-nib calligraphy simulator with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Paint a cream paper background.
- Model the pen as a broad nib: a short line segment of fixed width, held at a fixed angle (start with 40 degrees).
- When I drag the mouse, sweep that segment along the path: for each step, fill the quadrilateral between the nib's previous and current positions. Wind every quad the same way and fill with the nonzero rule so they merge cleanly. Thick and thin strokes should appear on their own: full width when moving across the nib, a hairline when moving along it.
- Define a few italic letters (for example "a", "n", "o" and "l") as stroke skeletons, a list of points per stroke joined by a Catmull-Rom spline, and have an autopilot pen write a word with them, moving along each stroke at an even speed and lifting between strokes.
- Add a nib angle control and redraw everything already written whenever it changes, so the whole word restyles at once.
Once that works, make it beautiful:
- Give the paper texture: soft mottling from a small noise function, faint horizontal laid lines and a scatter of fibers, and draw the ink with a multiply blend so the paper shows through.
- Make the ink feel wet: draw fresh strokes with a darker glossy layer that fades away over a few seconds as the ink dries, and add a small darker pool where each stroke starts and ends.
- Draw a simple dip pen at the writing point, rotated to match the nib, with a soft shadow that grows when it lifts.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a full alphabet in a second hand like uncial, ink that runs dry so the pen visits an inkwell, or hairs of ink wicking along paper fibers.
