Chinese Stroke Order Animation

📖 About This Tool

Chinese characters have a correct order: which stroke comes first matters. Get it wrong and the character looks awkward and takes longer to write. What a child learning to write needs is not another page of copying but a clear view of where each stroke starts and where it travels. This tool turns glyph data into animation and writes the character for you, one stroke at a time.

Type a character, press Enter or play, and the canvas writes it in the proper order. Speed can be slowed right down so you can write along; the canvas can be enlarged until it is legible on a projector. To study it step by step, use the previous and next stroke buttons, and the progress readout tells you which stroke you are on.

Each of the helper toggles has a purpose. The grid helps you judge balance and structure. The tracing guide lays the whole character down in pale grey first, with the written part darkening as it goes, which suits practising over the top. The centre line shows the path each stroke travels, making the direction of the brush visible. Turn on looping and it repeats, which works well in a classroom or for self study.

The side panel shows pinyin, radical, stroke count and structure. The current frame can be exported as an SVG for course material or as a PNG for direct use. Data covers common characters; rare ones report no data. Everything runs locally in the browser.

Stroke order is the part of writing Chinese that adults forget and children are graded on. A character can look correct and still be built wrong, and the wrong order slows writing down for years afterwards. The animation draws one stroke at a time on top of a faint outline of the whole character, so you see both where the stroke goes and where it sits in the finished shape.

Speed runs from slow, for tracing along with a finger, to fast, for review. Stepping back and forth by one stroke helps with the two or three strokes that are easy to muddle. Outlines, grid and the stroke midpoint guides can be switched off once the shape is familiar, leaving a blank grid to copy onto, which is close to a worksheet. Because the drawing is vector based, exporting keeps it sharp at any size for printing. The library holds the most frequently taught characters, and a character outside it is reported as missing rather than approximated.

✨ Features

• Stroke by stroke: writes in standard order, pausable and replayable.
• Adjustable speed: ten levels, from slow copying to quick review.
• Stepping: previous and next stroke with a live progress readout.
• Three helpers: grid, tracing guide and centre line, freely combined.
• Looping: repeats the demo, handy in class.
• Two exports: SVG vector and PNG bitmap.

🚀 How to Use

1. Type one character and press Enter or play.
2. Drag the speed slider for pace, the size slider for canvas size.
3. For practice, tick the tracing guide and use it with the grid.
4. When explaining, step through with previous and next stroke.
5. Export SVG for course material or PNG for direct use.

⚠️ Notes

• Coverage: stroke data covers common characters; very rare ones report no data.
• Standard: follows the common standard order; where variants exist, one is chosen.
• Exported frame: SVG captures the current progress, so pause first to capture a given stroke.
• Glyph style: outlines follow a Song style, so minor differences from textbooks are possible.
• Nothing is saved: refreshing returns to the initial state, so export in time.