Tegaki on Sumi

Semantic styling of classy writting.

A classless stylesheet and a handwriting engine. (No build steps were harmed in the making of this demo)

How this page works

Sumi styles the plain HTML. The pen is Tegaki's web component, loaded from esm.sh:

<tegaki-renderer font="Caveat" text="Hello, ink."></tegaki-renderer>

import { registerTegakiElement, registerBundle } from 'https://esm.sh/tegaki@1.1.0/wc';
import caveat from 'https://esm.sh/tegaki@1.1.0/fonts/caveat';
registerBundle(caveat);
registerTegakiElement();

The canvas draws over real DOM text, so you can select and copy what the pen writes.