Repolode
Submit
gkurt

gkurt/tegaki

Turns any font into animated handwriting that draws itself stroke by stroke, for React, Vue, Svelte, Solid, Astro and vanilla JS.

View on GitHubWebsite
Stars
3,244
Forks
123
Open issues
0
Last commit
9 days ago

What is it?

Tegaki is a handwriting animation library that converts any font into text that draws itself stroke by stroke. Developers do not need to author paths by hand or install native dependencies; they pick a font and render text with a component.

The core package provides framework wrappers for React, Svelte, Vue, SolidJS and Astro, plus a vanilla JavaScript engine and Web Components support. Several handwriting fonts are bundled, including Latin scripts, Arabic, Hebrew, Devanagari, Bengali, Japanese, Korean and Simplified Chinese, and other fonts can be converted with the online studio.

A command-line tool generates looping, one-time or static animated SVGs from a text string without installing anything. Shaping uses harfbuzz compiled to WASM, so ligatures, Arabic joining and right-to-left text are handled.

Key features

  • 01Animates any font stroke by stroke with natural timing.
  • 02Provides wrappers for React, Svelte, Vue, SolidJS, Astro, and Web Components.
  • 03Bundles handwriting fonts for Latin, Arabic, Hebrew, Devanagari, Japanese, Korean and Chinese.
  • 04Command-line tool generates self-drawing SVG files via npx.
  • 05Handles ligatures, Arabic joining and right-to-left text through harfbuzz.

Use cases

  • Adding animated handwritten headings to a marketing or landing page.
  • Generating animated SVG logos or banners for a README or slide deck.
  • Creating handwriting text animations in videos built with Remotion.

Quick start

  1. 1

    Install the package

    npm install tegaki
  2. 2

    Use the React renderer with a bundled font

Topics

#handwriting#animation#font#svg#react#text-animation#calligraphy#cursive#stroke-order

FAQ

What is tegaki?
Turns any font into animated handwriting that draws itself stroke by stroke, for React, Vue, Svelte, Solid, Astro and vanilla JS. Tegaki is a handwriting animation library that converts any font into text that draws itself stroke by stroke. Developers do not need to author paths by hand or install native dependencies; they pick a font and render text with a component.
Is tegaki free to use? What license does it have?
tegaki is open source under the MIT license. Check the license terms before using it in commercial products.
Is tegaki still maintained?
Actively maintained. The last commit to tegaki was on Oct 11, 2026.
What can I use tegaki for?
Adding animated handwritten headings to a marketing or landing page. Generating animated SVG logos or banners for a README or slide deck. Creating handwriting text animations in videos built with Remotion.
How do I install tegaki?
Install the package: npm install tegaki Use the React renderer with a bundled font
Where can I get tegaki?
The source code and installation instructions are on GitHub: https://github.com/gkurt/tegaki

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects