Reference · Stroke order from KanjiVG: draw it, and find a kanji by drawing it
strokeOrderSvgfunction
The strokes as an SVG, text a page can put in an element or a server can send: each stroke is a path, and with animate each is written
in its turn with CSS that the SVG carries, so that it needs no script and works where an <img> does not. A reader whose device asks for less motion is
shown every stroke at once.
Import it
import { strokeOrderSvg } from "@johnmorrisdotca/jisho/strokes";
Definition
function strokeOrderSvg(strokes: readonly string[], options?: StrokeOrderOptions): string
Parameters
| Name | Type | Description |
|---|---|---|
strokes | readonly string[] | The paths of the strokes in order, from |
options (optional) | StrokeOrderOptions | Size, motion, numbers, colour and label. |
Returns
string
The SVG; an empty drawing for no strokes.
Examples
import { loadStrokes, strokeOrderSvg, strokesOf } from "@johnmorrisdotca/jisho/strokes";
const svg = strokeOrderSvg(strokesOf(await loadStrokes("日"), "日"), { size: 120 });
console.log(svg.startsWith("<svg")); // truetrueWhat it prints (run when this page was built)