<p>There is the Wikimedia Commons <a href="https://commons.wikimedia.org/wiki/Commons:Stroke_Order_Project" rel="nofollow">Stroke Order Project</a>. It's a great resource with images and animations for many simplified characters.</p>

<p>You could also try generating your own diagrams and animations using the <a href="https://www.lri.fr/~dragice/strokefanning/" rel="nofollow">Stroke Fanning</a> application, which is backed by stroke order data from <a href="http://zdt.sourceforge.net/" rel="nofollow">ZDT</a>.</p>

<p><a href="http://www.yellowbridge.com/chinese/chinese-dictionary.php" rel="nofollow">YellowBridge</a> is my preferred online dictionary, and it has stroke order animations for almost everything I've ever searched for. I presume they own the copyright for these, so you couldn't just stick them on your website, but you could create your own diagrams or animations using them as a reference.</p>

CC BY-SA 3.0
2015-06-30T12:55:38.143Z
I'm aware of the Stroke Order Project, but it only covers 1,007 PRC standard characters, and it has been in this state for years. Even the Bopomofo & Hangeul characters are barely started - I doubt things will improve in the foreseeable future.
Philip Seyfi
CC BY-SA 3.0
2015-06-30T13:44:45.773Z
Stroker Fanning looks really interesting... I imagine these would work great in paper dictionaries, but I think they're probably not the most intuitive method for beginner learners.

It also unfortunately generates PDFs, not image files, and even some of the 500 most common hanzi miss the stroke order data.
Philip Seyfi
CC BY-SA 3.0
2015-06-30T13:53:06.230Z
ZDT is open source, so you could always contribute if you feel some of what you need is missing. Most PDF readers allow saving PDFs, or parts of them, as images.
Cocowalla
CC BY-SA 3.0
2015-06-30T12:41:49.037Z
2015-06-30T13:56:11.907Z
2015-06-30T13:56:11.907Z
Cocowalla
<p>There are some recent open source efforts that have opened this up a bit. One is <a href="https://github.com/chanind/hanzi-writer" rel="noreferrer">hanzi writer</a>, which was based on the data for 3195 strokes contained in <a href="http://zdt.sourceforge.net/" rel="noreferrer">ZDT</a> but now uses the more complete character data from <a href="https://github.com/skishore/makemeahanzi" rel="noreferrer">make me a hanzi demo</a>. It uses javascript to draw and animate the strokes, directly from json versions of the character path data. Update: Recently, the library has been <a href="https://github.com/chanind/hanzi-writer/pull/24" rel="noreferrer">made significantly smaller</a>. As of 2018-03-02, it is also able to <a href="https://github.com/chanind/hanzi-writer/pull/37" rel="noreferrer">show radicals in different colors</a>, based on data in <a href="https://github.com/skishore/makemeahanzi" rel="noreferrer">make me a hanzi demo</a>.</p>

<p>Another great recent project is <a href="https://github.com/skishore/makemeahanzi" rel="noreferrer">make me a hanzi demo</a>. It contains stroke animations for 9507 characters (includes traditional chars). This data was extracted from two free chinese fonts using a semi-automated algorithmic approach. At present, the main things of interest on the master branch are the two data files graphics.txt and dictionary.txt and a complete collection of animated SVG's of the characters. SVG's vary in size from 2KB to 45KB. If you would prefer to render the characters algorithmically, you may wish to explore some of the other branches, such as demo (check the lib sub-folder) and tools (which seems to be where recent developments are taking place). </p>

<p><a href="https://github.com/chaseconley/hanzi" rel="noreferrer">One more</a> i've come across that uses the same data format as ZDT but which doesn't reveal license terms is worth mentioning, as the code is brief and easy to follow. Nicely done Chase! To draw a new stroke, you can grab zdtStrokeData.txt from the first project mentioned here, then cut and paste the paths for the stroke you want to draw over the string where the 'strokes' array is defined (currently line 291). Update: You also need to replace tabs with semi-colons and add a final semi-colon first.</p>

<p>Regarding the differences between the two data formats used by the projects above, the ZDT format may include multiple paths for a single stroke, in cases where the direction of stroke changes mid stroke. The prefix format is <a href="https://github.com/chaseconley/hanzi" rel="noreferrer">explained well by Chase</a>. It records the direction of stroke, whether the current path is the final part of a stroke or part of the initial paths of a stroke and whether the current path is part of a radical.</p>

<p>The 'make me a hanzi demo' path data (graphics.txt) does not contain stroke direction information. Also, unlike the ZDT data, a single path defines a single stroke. The stroke information is in <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands" rel="noreferrer">SVG path format</a>, using quadratic bezier curves. To ascertain which part of the paths represent the radical, one may do a lookup in dictionary.txt. The dictionary also contains character decomposition data in an interesting format, derived from <a href="http://unicode.org/charts/unihan.html" rel="noreferrer">Unihan</a> and <a href="https://github.com/cburgmer/cjklib" rel="noreferrer">CJKLib</a>. The project page has more information on the format.</p>

CC BY-SA 3.0
2016-09-23T08:51:27.490Z
Fantastic developments, fzzylogic! Thanks for the heads up.
Philip Seyfi
CC BY-SA 3.0
2016-09-23T09:25:26.647Z
Np, hope you make something wonderful! :-) Things in this area have been stagnant for far too long.
fzzylogic
CC BY-SA 3.0
2016-09-23T02:47:52.230Z
2018-02-03T13:34:25.637Z
2018-02-03T13:34:25.637Z
fzzylogic
<p>I'd like to provide SVG, or at least GIF stroke order diagrams on my website.</p>

<p>Is there a database similar to the Japanese <a href="http://kanjivg.tagaini.net/" rel="noreferrer">KanjiVG</a>, but for Simplified and Traditional hanzi?</p>

<p>If not, is there a free or paid repository of stroke order diagrams in GIF or some other format?</p>

<characters><stroke-order>
Stroke order database
# Stroke order database

(Asked by: username_0 on 2015-06-30)

I'd like to provide SVG, or at least GIF stroke order diagrams on my website.

Is there a database similar to the Japanese [KanjiVG](http://kanjivg.tagaini.net/), but for Simplified and Traditional hanzi?

If not, is there a free or paid repository of stroke order diagrams in GIF or some other format?

**Tags:** characters, stroke-order

---

## 2 answers

### Answer by username_2 on 2016-09-23. Score: 14 | Accepted answer

There are some recent open source efforts that have opened this up a bit. One is [hanzi writer](https://github.com/chanind/hanzi-writer), which was based on the data for 3195 strokes contained in [ZDT](http://zdt.sourceforge.net/) but now uses the more complete character data from [make me a hanzi demo](https://github.com/skishore/makemeahanzi). It uses javascript to draw and animate the strokes, directly from json versions of the character path data. Update: Recently, the library has been [made significantly smaller](https://github.com/chanind/hanzi-writer/pull/24). As of 2018-03-02, it is also able to [show radicals in different colors](https://github.com/chanind/hanzi-writer/pull/37), based on data in [make me a hanzi demo](https://github.com/skishore/makemeahanzi).

Another great recent project is [make me a hanzi demo](https://github.com/skishore/makemeahanzi). It contains stroke animations for 9507 characters (includes traditional chars). This data was extracted from two free chinese fonts using a semi-automated algorithmic approach. At present, the main things of interest on the master branch are the two data files graphics.txt and dictionary.txt and a complete collection of animated SVG's of the characters. SVG's vary in size from 2KB to 45KB. If you would prefer to render the characters algorithmically, you may wish to explore some of the other branches, such as demo (check the lib sub-folder) and tools (which seems to be where recent developments are taking place).

[One more](https://github.com/chaseconley/hanzi) i've come across that uses the same data format as ZDT but which doesn't reveal license terms is worth mentioning, as the code is brief and easy to follow. Nicely done Chase! To draw a new stroke, you can grab zdtStrokeData.txt from the first project mentioned here, then cut and paste the paths for the stroke you want to draw over the string where the 'strokes' array is defined (currently line 291). Update: You also need to replace tabs with semi-colons and add a final semi-colon first.

Regarding the differences between the two data formats used by the projects above, the ZDT format may include multiple paths for a single stroke, in cases where the direction of stroke changes mid stroke. The prefix format is [explained well by Chase](https://github.com/chaseconley/hanzi). It records the direction of stroke, whether the current path is the final part of a stroke or part of the initial paths of a stroke and whether the current path is part of a radical.

The 'make me a hanzi demo' path data (graphics.txt) does not contain stroke direction information. Also, unlike the ZDT data, a single path defines a single stroke. The stroke information is in [SVG path format](https://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands), using quadratic bezier curves. To ascertain which part of the paths represent the radical, one may do a lookup in dictionary.txt. The dictionary also contains character decomposition data in an interesting format, derived from [Unihan](http://unicode.org/charts/unihan.html) and [CJKLib](https://github.com/cburgmer/cjklib). The project page has more information on the format.

> **Comments:**
> **username_0**: Fantastic developments, fzzylogic! Thanks for the heads up.  
> **username_2**: Np, hope you make something wonderful! :-) Things in this area have been stagnant for far too long.  

---

### Answer by username_1 on 2015-06-30. Score: 0

There is the Wikimedia Commons [Stroke Order Project](https://commons.wikimedia.org/wiki/Commons:Stroke_Order_Project). It's a great resource with images and animations for many simplified characters.

You could also try generating your own diagrams and animations using the [Stroke Fanning](https://www.lri.fr/~dragice/strokefanning/) application, which is backed by stroke order data from [ZDT](http://zdt.sourceforge.net/).

[YellowBridge](http://www.yellowbridge.com/chinese/chinese-dictionary.php) is my preferred online dictionary, and it has stroke order animations for almost everything I've ever searched for. I presume they own the copyright for these, so you couldn't just stick them on your website, but you could create your own diagrams or animations using them as a reference.

> **Comments:**
> **username_0**: I'm aware of the Stroke Order Project, but it only covers 1,007 PRC standard characters, and it has been in this state for years. Even the Bopomofo & Hangeul characters are barely started - I doubt things will improve in the foreseeable future.  
> **username_0**: Stroker Fanning looks really interesting... I imagine these would work great in paper dictionaries, but I think they're probably not the most intuitive method for beginner learners.  It also unfortunately generates PDFs, not image files, and even some of the 500 most common hanzi miss the stroke order data.  
> **username_1**: ZDT is open source, so you could always contribute if you feel some of what you need is missing. Most PDF readers allow saving PDFs, or parts of them, as images.  

---

