[Userscript] Hitsuji Animated Stroke Order Diagrams

Hitsuji Stroke Order Diagrams

by acm

version 0.9 (beta!)

This script add stroke order animations to WK. It uses the Draw Me A Kanji (DMAK) library (you can see a demo of the animations there). The kanji stroke data comes from KanjiVG.

Installation Instructions

  1. Get Tampermonkey (installation instructions in this thread)
  2. Click on the installation link (Tampermonkey should auto-detect .user.js files)
  3. Install the script after you check the security (at least see that script will only change the wanikani website, all @include should be related to WK :wink:)

Features

Stroke order animations for kanji and vocab entries on:

  • Content pages
  • Lessons and lesson reviews
  • Reviews

This animation can be started/stopped and reset by clicking.

In addition, it adds a pop-up window with a large version of the animation, which includes stroke numbers and controls to step through the animations.

Example Screenshots

h
k2

Other Scripts

8 Likes

Wait, what? Who draws the tree radical with the bottom-left stroke first?

1 Like

Looks like that particular SVG is a bit broken, it draws the right thing, but the number 1 is placed a bit too far south :slight_smile: You are looking at stroke 3.

Itā€™s a kanjiVG problem, I can report it right away :upside_down_face: [or itā€™s DMAK, the SVG looks fine actually.]


Edit itā€™s probably related to drawing off-screen for a moment, I sneakily fixed it.

Image before

k

1 Like

Had me going there for a minute. ā€œHave I been doing it wrong this whole time?ā€ :smiley:

1 Like

one of those script i didnā€™t know i wanted until i saw it - thanks :smile:
works perfectly so far!

1 Like

Thanks for the feedback :slight_smile: Good to hear that it does work somewhere else, I havenā€™t tested the script too much yet.

I saw the animations on kaniwani and thought it would be perfect on WK for my writing practice.

I came here was expecting stroke order diagrams of sheep, severely disappointed /s

4 Likes

Sorry, my name puns are just getting more terrible with each script ā€¦

1 Like

is this script currently working on firefox?

It is installed and active but doesnt show any animation

The user script doesnā€™t seem to be working outside of lessons and lesson reviews (Iā€™m using Chrome). Anyone else having this issue?