Cistercian Numerals

Notes

• All shapes are in the SVG.
• Uses classes to selectively apply stroke colors.
• Sets the SVG as an image with role="img".
• Uses <title> with aria-labelledby to provide an accessible name.
• The <title> acts as a tool-tip in many browsers, whether or not I want it to.
• Uses <desc> with aria-describedby to provide an accessible description.
• Works in Windows High Contrast Mode.
• Uses focusable="false" to prevent IE tab stops.
• 1 request, 7.8kb, 804 bytes from script.
• You can save the SVG for your own use and adjust the classes to make any number in the range that you want.
• I wrote a post with some background: Cistercian SVG

References

• Cistercian numerals at Wikipedia.
• The tweet from UCL Department of Mathematics.
• Clairvo, a proof of concept OpenType font.
• A React-driven app mutating an SVG (5 HTTP requests, 68kb, ~57kb from React).
• Another React-driven SVG-morphing effort at Codepen (7 HTTP requests, 89kb, ~40kb from React, ~40 from fonts).