# chanind/hanzi-writer

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/chanind-hanzi-writer).**

4,835 stars · 717 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/chanind/hanzi-writer
- Homepage: https://hanziwriter.org
- awesome-repositories: https://awesome-repositories.com/repository/chanind-hanzi-writer.md

## Description

Hanzi Writer is an interactive Chinese character writing tutor and SVG animation library designed to visualize and validate the sequential construction of characters. It functions as a pedagogical tool for practicing calligraphy by rendering stroke-by-stroke animations and validating user-drawn paths.

The library provides a system for comparing user input against predefined stroke sequences to verify writing accuracy in real time. It guides users through interactive exercises, directing the writing process and providing immediate feedback on stroke order.

The tool handles the retrieval of character coordinate data from remote sources to render SVG path animations. It maps mouse and touch events to these path segments to detect and validate the completion of each stroke.

## Tags

### Education & Learning Resources

- [Chinese Character Pedagogy](https://awesome-repositories.com/f/education-learning-resources/chinese-character-pedagogy.md) — Provides interactive visual guides to teach the correct stroke order and writing process for Chinese characters.
- [Calligraphy Tutors](https://awesome-repositories.com/f/education-learning-resources/calligraphy-tutors.md) — Functions as an interactive tool for practicing Chinese calligraphy through drawing validation and guided exercises.
- [Interactive Language Practice](https://awesome-repositories.com/f/education-learning-resources/interactive-language-practice.md) — Provides an interactive way for students to practice drawing characters with real-time sequence validation.
- [Stroke Order Visualizers](https://awesome-repositories.com/f/education-learning-resources/stroke-order-visualizers.md) — Provides a pedagogical resource for visualizing and practicing the sequential construction of Chinese characters.
- [Language Learning Toolkits](https://awesome-repositories.com/f/education-learning-resources/language-learning-toolkits.md) — Provides integrated tools for character writing and verification for use in language learning applications.

### Graphics & Multimedia

- [SVG Path Interaction Mapping](https://awesome-repositories.com/f/graphics-multimedia/canvas-coordinate-transformations/touch-to-canvas-coordinate-mapping/svg-path-interaction-mapping.md) — Maps mouse and touch events to specific SVG path segments to detect the completion of character strokes.
- [Guided Writing Exercises](https://awesome-repositories.com/f/graphics-multimedia/immersive-interactive-systems/user-interaction/guided-writing-exercises.md) — Directs users through interactive exercises that require drawing characters in the correct stroke sequence. ([source](https://chanind.github.io/hanzi-writer))
- [SVG Path Animations](https://awesome-repositories.com/f/graphics-multimedia/svg-path-animations.md) — Renders animated SVG paths for handwritten characters to demonstrate step-by-step construction.
- [SVG Path Rendering](https://awesome-repositories.com/f/graphics-multimedia/svg-path-rendering.md) — Translates coordinate data from SVG path definitions into visual screen elements to render characters.
- [Path Accuracy Validators](https://awesome-repositories.com/f/graphics-multimedia/svg-path-rendering/path-accuracy-validators.md) — Compares user-drawn SVG paths against predefined character data to verify writing accuracy.
- [Glyph Coordinate Retrieval](https://awesome-repositories.com/f/graphics-multimedia/stroke-data-serializations/glyph-coordinate-retrieval.md) — Retrieves SVG path coordinates for characters from remote sources to enable rendering of stroke animations. ([source](https://chanind.github.io/hanzi-writer-data))

### Testing & Quality Assurance

- [Handwriting Validation](https://awesome-repositories.com/f/testing-quality-assurance/handwriting-validation.md) — Compares user-drawn strokes against predefined sequences to provide immediate feedback on writing accuracy. ([source](https://chanind.github.io/hanzi-writer/demo.html))

### User Interface & Experience

- [Sequence Validation](https://awesome-repositories.com/f/user-interface-experience/digital-ink-capture/stroke-analysis/sequence-validation.md) — Compares user input coordinates against a predefined order of strokes to verify writing accuracy in real time.
- [Animation Sequencing](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/transition-effects/animation-sequencing.md) — Coordinates the timing and order of stroke animations based on the character's writing sequence.

### Part of an Awesome List

- [SVG Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries.md) — Provides a library for rendering SVG stroke order animations to demonstrate correct writing sequences.
- [JavaScript 框架汇总](https://awesome-repositories.com/f/awesome-lists/more/javascript.md) — Listed in the “JavaScript 项目” section of the Great Open Source Project awesome list.