Recently I discovered the Cistercian Numerals. There were a couple of tweets over the last days that showed the ciphers. I never had heard about this numbering system, but immediatly it grabbed my attention, because it was so simple, but the result looks very interesting. Since there are only a few rules that distinguish the digits 1-9, and their position inside a quadrant denotes if it is a one, ten, hundred or thousand, I thought that this might make for a good clock or date display - which is what they were used for originally

The numbers were not used for arithmetic, fractions or accounting, but indicated years, foliation (numbering pages), divisions of texts, the numbering of notes and other lists, indexes and concordances, arguments in Easter tables, and the lines of a staff in musical notation.

With SVG and some JavaScript, here is what I came up with:

See the Pen
Cistercian Numerals Calender / Clock
by Tom (@webrocker)
on CodePen.

I'm very sure that there's lot of room for improvement, especially because I'm not writing JavaScript constantly. My main focus was to get this idea off the ground, and to not use any libraries or frameworks, but to use the web's technologies directly. :-)

I owe a great deal to this codepen by Andrew Aquino, since there I found the initial ideas and logic on how to map the numerals' paths to SVG points and how to split the numbers into their 1 / 10 / 100 / 1000 digits. 🤗

If you're curious what the numbers are, have a look at the source, I added a SVG text element with the arabic numbers in the hope that this will make the display a tad more accessible.

Update: And just now I added a data-number attribute, which makes sure that only the numbers that needs changing will be changed. Up to now the whole set of numbers was updated every second. Ahem. :-)

Update: My initial "hooray it works" just got a little bit subdued after re-reading the Wikipedia article and the last sentence in the history paragraph: … and in the early twentieth century Nazis flirted with the idea the numerals could be used for Aryan symbolism. :-/ Well, I guess I should have known, and with 8118 (of all combinations) looking like a stretched swastika, no surprise the damned nazis were interested.