Hanzi SVG

This library, when imported, populates img elements with 汉字 stroke order animations.

Installation

<script type="module">
    import { hydrateImages } from "https://cdn.jsdelivr.net/npm/[email protected]";
    hydrateImages();
</script>

Basic usage

<img data-hanzi="龍" width="200" height="200" />

Customized colors

<img
    data-hanzi="龙"
    data-stroke-color="red"
    data-outline-color="brown"
    width="200"
    height="200"
/>

Programmatic usage

import { hydrateSingleImage, createHanziSvg, fetchCharacterData } from "hanzi-svg";

document.querySelectorAll("img[data-hanzi]").forEach(img => hydrateSingleImage(img as HTMLElement));

const characterData = await fetchCharacterData("龙");
document.body.appendChild(createHanziSvg(characterData, /* stroke color */ "black", /* outline color */ "gray"));