Generating Font Data
The Tegaki generator processes fonts through a multi-stage pipeline to produce stroke data suitable for handwriting animation. Use the studio on the Tegaki website to generate font bundles directly in the browser.
Pipelines
Section titled “Pipelines”The generator has two ways to find a glyph’s strokes. Both start the same way: opentype.js extracts the path commands and metrics, and adaptive de Casteljau subdivision flattens the bezier curves into polylines.
Geometry (default)
Section titled “Geometry (default)”Works on the outline itself, with no bitmap:
- Mesh: a conforming Delaunay triangulation fills the glyph’s ink
- Ink graph: the triangles’ chordal axis gives each stroke’s centerline, with its width read from the chords
- Spurs and nibs: short offshoots at pointed ends and corners are pruned, and the ink they held is painted by an elliptic nib stamp as the pen passes
- Junctions: where strokes meet, the arms are paired so a pen runs straight through a crossing instead of turning
- Simplify: width-aware Ramer-Douglas-Peucker keeps the points the pen needs to cover the ink; leftover holes get stamps of their own
- Stroke order: ordered by a matching KanjiVG or Hershey reference glyph when one fits the ink, otherwise top-to-bottom/left-to-right
Raster
Section titled “Raster”Rasterizes the glyph and thins it to a skeleton:
- 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: a 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 |
| Pipeline | geometry |
Stroke extraction: geometry or raster |
| Resolution | 400 |
Bitmap resolution for rasterization (raster) |
| Skeleton method | zhang-suen |
Skeletonization algorithm (raster) |
| 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 (raster) |
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), a (animation duration), and, for geometry strokes that carry them, n (nib stamps as [pointIndex, dx, dy, major, minor, angle]). See the TegakiGlyphData type for full details.
Interactive generator
Section titled “Interactive generator”Use the studio to visualize each pipeline stage and fine-tune options.