Building a chronograph for the year you were born

I have been trying to build the chrono-sim for two years. Every few months I open the file, stare at it, and close it again. The problem is not the algorithm — that part is well known, and the classical references are surprisingly readable. The problem is the interface. Nobody wants a 干支 calculator that looks like a 1998 desktop app.

What I want is something you can point at a year and have it draw the cycle. Not as a table, not as a flowchart — as something you can read by feel, the way you read a watch.

This post is the first small step: a static, server-rendered chronograph that takes a year and renders the four pillars (年柱 / 月柱 / 日柱 / 时柱) as concentric rings. No input, no interactivity, just a number in and a picture out. The dynamic version — where you can scrub the year and watch the pillars shift — is the demo I keep promising.

The interesting bit is the rendering. SVG arcs are not actually that hard once you accept that you are going to write a tiny helper that converts a year and a pillar into a start angle and an arc length. Once you have that, the rest is layout. The classical sexagenary cycle has 60 stops; for a single year you only need 4 of them. The remaining 56 belong to other years.

What I learned this week: the visual rhythm of a cycle is not the same as the visual rhythm of a list. A list asks you to scan; a cycle asks you to locate. The design moves that serve a list (clear separators, even spacing) actively hurt a cycle. The right move is to thin the separators, weight the stop you are on, and let the eye orbit.