2

Before I get started, I know what you're going to say: "now Becky, calm down, we don't even have proper pinyin support yet". I know, I know. But nevertheless...

Hanzi Writer has amazingly beautiful animated drawings of Chinese Characters. Just... wow! It's so pretty.

stroke order of 是

Hanzi Writer is a free and open-source javascript library for Chinese character stroke order animations and stroke order practice quizzes. Works with both simplified and traditional characters.
Github

It's under the MIT License allowing for commercial usage.

Even if we managed to get a small proportion of that working here, that'd still be fairly amazing, I think. Chess.SE has a chess board (see also their meta post), so it's not totally without precedent.

Question: What are the chances of supporting Hanzi Writer animated characters?

Maybe other users have other suggestions, or reasonable alternatives. I don't think I've seen anything as clean as Hanzi Writer previously, however.

2

This is quite an amazing program, and thank you for introducing us to it.

Although I’d love to see it as part of Chinese SE, I cannot see the use of it beyond answering “what is the stroke order of X” questions, and those aren’t actually very interesting or common Chinese language questions. Thus, SE is unlikely going to introduce it unless a very strong argument for why we need it can be put forward.

Now, if there was an equivalent for cursive, we might be able to make use of it for demonstrating calligraphy.

———

If an array-slicing syntax can be imposed on the stroke sequence, we might be able to exploit this program to generate character parts to answer questions hmm...

1

I think it is technically possible to get that working, but it's not clear to me what the benefit would be. Perhaps you can link to some example questions where it would be helpful.

As for the technical side, I think we could ask the staff to enable Stack Snippets on this site. Then users could write a snippet to display the animation. I wrote an example snippet to show how that works. See the Hanzi Writer documentation for all the other options.

3
  • It's a fair point; it probably won't be used frequently. I envisage it being used for most "handwriting" and "stroke order" questions. (But, if it exists, I'd probably use it just for eye candy, e.g. for questions about specific characters or words.)
    – Becky 李蓓 Mod
    Feb 23 '20 at 2:39
  • I'd say Why does my handwritten 尽 look so ugly? would benefit from this feature.
    – Becky 李蓓 Mod
    Feb 24 '20 at 9:27
  • Hanzi Writer has a demo webpage which seems useful. Oh, and there's Make Me a Hanzi which can link to specific hanzi, e.g. 贯.
    – Becky 李蓓 Mod
    May 9 '20 at 1:26
1

I found a hacky way to create animated gifs from Hanzi Writer. I created a .html file locally (i.e., on my computer):

<head><script src="https://cdn.jsdelivr.net/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js"></script></head>

<body>
  <div id="docs-target-5" class="inline-demo"></div>
  <script>
  (function() {
    var writer = HanziWriter.create('docs-target-5', '尽', {
      width: 250,
      height: 250,
      padding: 0,
      delayBetweenLoops: 100,
      delayBetweenStrokes: 30, // milliseconds
      radicalColor: '#337ab7' // blue
    });
    writer.loopCharacterAnimation();
  })();
  </script>
</body>

I opened this html page in my browser, and it plays the Hanzi Writer animation for 尽. Next, I used the screen recording software peek to record the animation. I recorded it as an animated png .apng. I renamed the file to .png which allows it to be uploaded to Imgur via Stack Exchange. And here's the result:

animated 尽

It's seems reasonable to do it this way.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .