Generating Font Data
The Tegaki generator processes Google Fonts through a multi-stage pipeline to produce stroke data suitable for handwriting animation. Use the interactive generator on the Tegaki website to generate font bundles directly in the browser.
Pipeline
Section titled “Pipeline”Each glyph goes through these stages:
- Extract — opentype.js extracts path commands and metrics
- Flatten — Adaptive de Casteljau subdivision converts bezier curves to polyline segments
- Rasterize — Scanline fill with nonzero winding rule produces a binary bitmap
- Skeletonize — Zhang-Suen thinning reduces the bitmap to 1px-wide skeleton
- Trace — Walks skeleton pixels into polylines, prunes short spurs, simplifies with Ramer-Douglas-Peucker
- Width — Distance transform computes stroke width at each skeleton point
- Stroke order — Groups polylines into connected components, sorts top-to-bottom/left-to-right
Options
Section titled “Options”| Option | Default | Description |
|---|---|---|
| Font | Caveat | Google Font family name |
| Characters | A-Za-z0-9 + punctuation | Characters to process |
| Resolution | 400 | Bitmap resolution for rasterization |
| Skeleton method | zhang-suen | Skeletonization algorithm |
| Line cap | round | Stroke line cap style |
| Bezier tolerance | 0.5 | Flatness tolerance for bezier subdivision |
| RDP tolerance | 1.0 | Ramer-Douglas-Peucker simplification tolerance |
Output format
Section titled “Output format”The generator outputs a compressed format with short keys to minimize bundle size. Per-glyph data includes w (advance width), t (total animation duration), and s (strokes). Each stroke has p (points as [x, y, width] tuples), d (delay), and a (animation duration). See the TegakiGlyphData type for full details.
Interactive generator
Section titled “Interactive generator”Use the interactive generator tool to visualize each pipeline stage and fine-tune options.