StrokeOrder
Draws a kanji stroke by stroke from its KanjiVG diagram (fetched as an inline SVG). Each stroke path is revealed by animating its dash offset in stroke order. Honors reduced motion by rendering the finished diagram statically, and falls back to the plain glyph when no stroke data exists.
Interfaces¶
StrokeOrderProps¶
Defined in: src/shared/components/StrokeOrder.tsx:63
Properties¶
| Property | Type | Description | Defined in |
|---|---|---|---|
className? |
string |
Wrapper sizing classes (the SVG fills it). | src/shared/components/StrokeOrder.tsx:73 |
controls? |
boolean |
Show replay / step / speed controls (the hub's kanji view). | src/shared/components/StrokeOrder.tsx:67 |
literal |
string |
The kanji to draw. | src/shared/components/StrokeOrder.tsx:65 |
numbers? |
boolean |
Reveal the stroke-number markers once drawing settles. | src/shared/components/StrokeOrder.tsx:71 |
replayOnClick? |
boolean |
Replay when the diagram itself is clicked (compact surfaces). | src/shared/components/StrokeOrder.tsx:69 |
Functions¶
KanjiGlyph()¶
Defined in: src/shared/components/StrokeOrder.tsx:34
A kanji rendered as an SVG glyph that scales to fill its container, used when no stroke-order data exists so the literal never renders tiny inside a large diagram slot.
Parameters¶
| Parameter | Type | Description |
|---|---|---|
props |
{ className?: string; literal: string; } |
The glyph + sizing. |
props.className? |
string |
- |
props.literal |
string |
- |
Returns¶
Element
The scalable glyph.
StrokeOrder()¶
Defined in: src/shared/components/StrokeOrder.tsx:82
The StrokeOrder component.
Parameters¶
| Parameter | Type | Description |
|---|---|---|
props |
StrokeOrderProps |
The props. |
Returns¶
Element
The animated stroke-order diagram.