diff --git a/README.md b/README.md
index a147166..f3e5291 100644
--- a/README.md
+++ b/README.md
@@ -99,15 +99,16 @@ pnpm wrangler pages deploy .output/public --project-name="$CLOUDFLARE_PROJECT_NA
 
 <!-- sources:start -->
 
-| 用途                             | 来源                                                                                                     | 许可                                                      |
-| -------------------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
-| 判定五地字形差异                 | [Adobe Source Han Sans / Serif（CMap 资源）](https://github.com/adobe-fonts/source-han-sans)             | [SIL OFL 1.1](https://openfontlicense.org/)               |
-| 页面展示用字体                   | [Noto Sans / Noto Serif（含 CJK）](https://github.com/notofonts/noto-cjk)                                | [SIL OFL 1.1](https://openfontlicense.org/)               |
-| 简繁、港台异体、日本新旧字体对应 | [OpenCC 开放中文转换](https://github.com/BYVoid/OpenCC)                                                  | [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0) |
-| 五地标准字表                     | [zispace/hanzi-chars](https://github.com/zispace/hanzi-chars)                                            | [仓库未声明](https://github.com/zispace/hanzi-chars)      |
-| 笔画数、读音                     | [Unicode Han Database (Unihan)](https://www.unicode.org/reports/tr38/)                                   | [Unicode License v3](https://www.unicode.org/license.txt) |
-| 韩式异体对应                     | [Unicode IRG N2200（韩国教育用汉字提案）](https://www.unicode.org/L2/L2017/17173-irgn2200-unihan-db.pdf) | [Unicode License v3](https://www.unicode.org/license.txt) |
-| 大陆字频排名                     | [hanziDB.csv（Jun Da《现代汉语单字频率列表》）](https://github.com/ruddfawcett/hanziDB.csv)              | [MIT](https://opensource.org/licenses/MIT)                |
+| 用途                             | 来源                                                                                                     | 许可                                                            |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
+| 判定五地字形差异                 | [Adobe Source Han Sans / Serif（CMap 资源）](https://github.com/adobe-fonts/source-han-sans)             | [SIL OFL 1.1](https://openfontlicense.org/)                     |
+| 页面展示用字体                   | [Noto Sans / Noto Serif（含 CJK）](https://github.com/notofonts/noto-cjk)                                | [SIL OFL 1.1](https://openfontlicense.org/)                     |
+| 简繁、港台异体、日本新旧字体对应 | [OpenCC 开放中文转换](https://github.com/BYVoid/OpenCC)                                                  | [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)       |
+| 日本字形笔顺动画                 | [KanjiVG](https://kanjivg.tagaini.net/)                                                                  | [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/) |
+| 五地标准字表                     | [zispace/hanzi-chars](https://github.com/zispace/hanzi-chars)                                            | [仓库未声明](https://github.com/zispace/hanzi-chars)            |
+| 笔画数、读音                     | [Unicode Han Database (Unihan)](https://www.unicode.org/reports/tr38/)                                   | [Unicode License v3](https://www.unicode.org/license.txt)       |
+| 韩式异体对应                     | [Unicode IRG N2200（韩国教育用汉字提案）](https://www.unicode.org/L2/L2017/17173-irgn2200-unihan-db.pdf) | [Unicode License v3](https://www.unicode.org/license.txt)       |
+| 大陆字频排名                     | [hanziDB.csv（Jun Da《现代汉语单字频率列表》）](https://github.com/ruddfawcett/hanziDB.csv)              | [MIT](https://opensource.org/licenses/MIT)                      |
 
 <!-- sources:end -->
 
diff --git a/app/components/StrokeOrder.vue b/app/components/StrokeOrder.vue
new file mode 100644
index 0000000..cc54693
--- /dev/null
+++ b/app/components/StrokeOrder.vue
@@ -0,0 +1,404 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import {
+  KANJIVG_LICENSE,
+  kanjiVGDataUrl,
+  kanjiVGViewerUrl,
+  parseKanjiVG,
+  strokeDuration,
+  type KanjiVGStroke,
+} from '~/utils/kanjivg.ts'
+
+const props = defineProps<{ char: string }>()
+const { t } = useT()
+
+type Status = 'loading' | 'ready' | 'missing' | 'error'
+type Phase = 'idle' | 'playing' | 'paused' | 'done'
+
+const status = ref<Status>('loading')
+const phase = ref<Phase>('idle')
+const strokes = shallowRef<KanjiVGStroke[]>([])
+const viewBox = ref('0 0 109 109')
+const completed = ref(0)
+const active = ref<number>()
+const activePoint = ref<{ x: number; y: number }>()
+const lengths = ref<number[]>([])
+const pathElements: SVGPathElement[] = []
+
+let request: AbortController | undefined
+let animation: Animation | undefined
+let run = 0
+
+const total = computed(() => strokes.value.length)
+const current = computed(() =>
+  active.value === undefined ? completed.value : active.value + 1,
+)
+const viewerUrl = computed(() => kanjiVGViewerUrl(props.char))
+const progressLabel = computed(() =>
+  t('char.strokeProgress', { current: current.value, total: total.value }),
+)
+const playLabel = computed(() => {
+  if (phase.value === 'playing') return t('char.strokePause')
+  if (phase.value === 'done') return t('char.strokeReplay')
+  return t('char.strokePlay')
+})
+const playIcon = computed(() => {
+  if (phase.value === 'playing') return 'i-ri-pause-fill'
+  if (phase.value === 'done') return 'i-ri-replay-line'
+  return 'i-ri-play-fill'
+})
+
+function setPathElement(
+  element: Element | ComponentPublicInstance | null,
+  i: number,
+) {
+  if (element instanceof SVGPathElement) pathElements[i] = element
+}
+
+function stop(next: Phase = 'idle') {
+  run++
+  animation?.cancel()
+  animation = undefined
+  active.value = undefined
+  activePoint.value = undefined
+  phase.value = next
+}
+
+async function measure() {
+  await nextTick()
+  lengths.value = strokes.value.map(
+    (_, i) => pathElements[i]?.getTotalLength() ?? 0,
+  )
+}
+
+async function load() {
+  request?.abort()
+  stop()
+  status.value = 'loading'
+  strokes.value = []
+  lengths.value = []
+  completed.value = 0
+  pathElements.length = 0
+
+  const controller = new AbortController()
+  request = controller
+  try {
+    const response = await fetch(kanjiVGDataUrl(props.char), {
+      cache: 'force-cache',
+      signal: controller.signal,
+    })
+    if (response.status === 404) {
+      status.value = 'missing'
+      return
+    }
+    if (!response.ok) throw new Error(`KanjiVG returned ${response.status}`)
+    const data = parseKanjiVG(await response.text())
+    if (controller.signal.aborted) return
+    strokes.value = data.strokes
+    viewBox.value = data.viewBox
+    status.value = 'ready'
+    await measure()
+  } catch (error) {
+    if (!(error instanceof DOMException && error.name === 'AbortError'))
+      status.value = 'error'
+  }
+}
+
+async function play() {
+  if (phase.value === 'playing') {
+    animation?.pause()
+    phase.value = 'paused'
+    return
+  }
+  if (phase.value === 'paused' && animation) {
+    phase.value = 'playing'
+    animation.play()
+    return
+  }
+
+  if (phase.value === 'done') completed.value = 0
+  const thisRun = ++run
+  phase.value = 'playing'
+  const reducedMotion = window.matchMedia(
+    '(prefers-reduced-motion: reduce)',
+  ).matches
+
+  for (let i = completed.value; i < strokes.value.length; i++) {
+    if (thisRun !== run) return
+    const element = pathElements[i]
+    const length = lengths.value[i]
+    if (!element || !length) {
+      completed.value = i + 1
+      continue
+    }
+
+    active.value = i
+    const point = element.getPointAtLength(0)
+    activePoint.value = { x: point.x, y: point.y }
+    animation = element.animate(
+      { strokeDashoffset: [length, 0] },
+      {
+        duration: reducedMotion ? 1 : strokeDuration(length),
+        easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        fill: 'forwards',
+      },
+    )
+    try {
+      await animation.finished
+    } catch {
+      return
+    }
+    if (thisRun !== run) return
+    completed.value = i + 1
+    await nextTick()
+    animation.cancel()
+    animation = undefined
+  }
+
+  animation = undefined
+  active.value = undefined
+  activePoint.value = undefined
+  phase.value = 'done'
+}
+
+function step(delta: -1 | 1) {
+  const target = Math.max(0, Math.min(total.value, current.value + delta))
+  stop(target === total.value ? 'done' : 'idle')
+  completed.value = target
+}
+
+onMounted(load)
+watch(() => props.char, load)
+onBeforeUnmount(() => {
+  request?.abort()
+  stop()
+})
+</script>
+
+<template>
+  <section v-if="status !== 'missing'" aria-labelledby="stroke-order-title">
+    <div
+      class="mb-4 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2"
+    >
+      <h2 id="stroke-order-title" class="eyebrow font-normal">
+        {{ t('char.strokeOrder') }}
+      </h2>
+      <p class="text-xs text-mute">
+        {{ t('char.strokeSource') }}：
+        <a
+          :href="viewerUrl"
+          target="_blank"
+          rel="noreferrer"
+          class="underline decoration-rule underline-offset-4 hover:decoration-current focus-ring"
+          >KanjiVG</a
+        >
+        ·
+        <a
+          :href="KANJIVG_LICENSE"
+          target="_blank"
+          rel="noreferrer"
+          class="underline decoration-rule underline-offset-4 hover:decoration-current focus-ring"
+          >CC BY-SA 3.0</a
+        >
+      </p>
+    </div>
+
+    <div
+      v-if="status === 'loading'"
+      class="grid animate-pulse gap-5 sm:grid-cols-[minmax(13rem,16rem)_1fr] sm:items-center"
+      :aria-label="t('char.strokeLoading')"
+    >
+      <div class="aspect-square border border-rule bg-sunk" />
+      <div class="flex flex-col gap-4">
+        <div class="h-10 w-32 bg-sunk" />
+        <div class="h-4 w-full max-w-sm bg-sunk" />
+        <div class="h-9 w-48 bg-sunk" />
+      </div>
+    </div>
+
+    <div
+      v-else-if="status === 'error'"
+      class="flex items-center justify-between gap-4 border-y border-rule py-4 text-sm text-soft"
+    >
+      <span>{{ t('char.strokeError') }}</span>
+      <button
+        type="button"
+        class="shrink-0 border border-rule rounded-md px-3 py-1.5 text-ink transition-colors hover:border-ink/30 focus-ring"
+        @click="load"
+      >
+        {{ t('char.strokeRetry') }}
+      </button>
+    </div>
+
+    <div
+      v-else
+      class="grid gap-5 sm:grid-cols-[minmax(13rem,16rem)_1fr] sm:items-center sm:gap-8"
+    >
+      <div class="stroke-board mx-auto aspect-square w-full max-w-64">
+        <svg
+          :viewBox="viewBox"
+          class="block size-full"
+          role="img"
+          :aria-label="t('char.strokeDiagram', { char, total })"
+        >
+          <g class="stroke-guides" aria-hidden="true">
+            <path d="M54.5 0V109M0 54.5H109" />
+            <path class="stroke-guide-diagonal" d="M0 0L109 109M109 0L0 109" />
+          </g>
+          <g class="stroke-underlay" aria-hidden="true">
+            <path v-for="stroke in strokes" :key="stroke.order" :d="stroke.d" />
+          </g>
+          <g class="stroke-ink">
+            <path
+              v-for="(stroke, i) in strokes"
+              :key="stroke.order"
+              :ref="(element) => setPathElement(element, i)"
+              :d="stroke.d"
+              :class="active === i ? 'stroke-current' : ''"
+              :style="{
+                strokeDasharray: lengths[i],
+                strokeDashoffset: i < completed ? 0 : lengths[i],
+              }"
+            />
+          </g>
+          <circle
+            v-if="activePoint"
+            class="stroke-lead"
+            :cx="activePoint.x"
+            :cy="activePoint.y"
+            r="2"
+          />
+        </svg>
+      </div>
+
+      <div class="flex min-w-0 flex-col justify-center gap-5">
+        <span class="hanji-jp self-center text-5xl leading-none" lang="ja">{{
+          char
+        }}</span>
+
+        <div class="flex flex-col gap-2">
+          <span class="self-end eyebrow tabular" aria-live="polite">
+            {{ progressLabel }}
+          </span>
+          <div
+            class="grid gap-1"
+            :style="{ gridTemplateColumns: `repeat(${total}, minmax(0, 1fr))` }"
+            aria-hidden="true"
+          >
+            <span
+              v-for="stroke in strokes"
+              :key="stroke.order"
+              class="h-0.5 transition-colors duration-150"
+              :class="
+                active === stroke.order - 1
+                  ? 'bg-$c-g1'
+                  : stroke.order <= completed
+                    ? 'bg-$c-ink'
+                    : 'bg-$c-rule'
+              "
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+          <div class="flex shrink-0 items-center gap-2">
+            <button
+              type="button"
+              class="flex-center size-9 border border-rule rounded-md text-soft transition-colors hover:border-ink/30 hover:text-ink disabled:cursor-not-allowed disabled:opacity-30 focus-ring"
+              :disabled="current === 0"
+              :aria-label="t('char.strokePrevious')"
+              :title="t('char.strokePrevious')"
+              @click="step(-1)"
+            >
+              <span class="i-ri-skip-back-mini-fill block" />
+            </button>
+            <button
+              type="button"
+              class="inline-flex h-9 min-w-24 items-center justify-center gap-2 rounded-md bg-ink px-4 text-sm text-paper transition-opacity hover:opacity-80 focus-ring"
+              @click="play"
+            >
+              <span :class="playIcon" class="block" />
+              {{ playLabel }}
+            </button>
+            <button
+              type="button"
+              class="flex-center size-9 border border-rule rounded-md text-soft transition-colors hover:border-ink/30 hover:text-ink disabled:cursor-not-allowed disabled:opacity-30 focus-ring"
+              :disabled="current >= total"
+              :aria-label="t('char.strokeNext')"
+              :title="t('char.strokeNext')"
+              @click="step(1)"
+            >
+              <span class="i-ri-skip-forward-mini-fill block" />
+            </button>
+          </div>
+          <p class="min-w-0 flex-1 basis-32 text-xs text-mute leading-relaxed">
+            {{ t('char.strokeHint') }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.stroke-board {
+  border: 1px solid var(--c-rule);
+  background: var(--c-paper-sunk);
+}
+
+.stroke-guides {
+  fill: none;
+  stroke: var(--c-rule);
+  stroke-width: 0.65;
+}
+
+.stroke-guide-diagonal {
+  stroke-dasharray: 2.25 2.25;
+}
+
+.stroke-underlay,
+.stroke-ink {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.stroke-underlay {
+  stroke: var(--c-ink-mute);
+  stroke-width: 3;
+  opacity: 0.16;
+}
+
+.stroke-ink {
+  stroke: var(--c-ink);
+  stroke-width: 3.2;
+}
+
+.stroke-ink path {
+  will-change: stroke-dashoffset;
+}
+
+.stroke-ink .stroke-current {
+  stroke: var(--c-g1);
+}
+
+.stroke-lead {
+  fill: var(--c-g1);
+  stroke: var(--c-paper-sunk);
+  stroke-width: 1;
+  animation: lead-pulse 900ms ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes lead-pulse {
+  50% {
+    r: 2.8px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stroke-lead {
+    animation: none;
+  }
+}
+</style>
diff --git a/app/locales/ja-jp.ts b/app/locales/ja-jp.ts
index e95953d..2fe0b6c 100644
--- a/app/locales/ja-jp.ts
+++ b/app/locales/ja-jp.ts
@@ -110,6 +110,19 @@ export const jaJP: typeof zhCN = {
     unlistedFallback: '未収録 · 参考字形を表示',
     stacked: '重ね表示',
     split: '並列表示',
+    strokeOrder: '日本語の漢字の筆順',
+    strokeHint: '連続再生と一画ずつの前後移動ができます。',
+    strokePlay: '再生',
+    strokePause: '一時停止',
+    strokeReplay: 'もう一度',
+    strokePrevious: '前の一画',
+    strokeNext: '次の一画',
+    strokeProgress: '第{current}画 / 全{total}画',
+    strokeDiagram: '「{char}」の筆順アニメーション（全{total}画）',
+    strokeLoading: '筆順を読み込んでいます…',
+    strokeError: '筆順を読み込めませんでした。',
+    strokeRetry: '再試行',
+    strokeSource: '筆画データ',
     dict: '外部辞書',
     tierCn: { 1: '一級字', 2: '二級字', 3: '三級字' },
     tierTw: { 1: '常用国字', 2: '次常用国字' },
diff --git a/app/locales/ko-kr.ts b/app/locales/ko-kr.ts
index 1fd1e7e..2f59049 100644
--- a/app/locales/ko-kr.ts
+++ b/app/locales/ko-kr.ts
@@ -110,6 +110,19 @@ export const koKR: typeof zhCN = {
     unlistedFallback: '미수록 · 참고 자형 표시',
     stacked: '겹쳐 보기',
     split: '나란히 보기',
+    strokeOrder: '일본 한자 필순',
+    strokeHint: '연속 재생하거나 앞뒤로 한 획씩 볼 수 있습니다.',
+    strokePlay: '재생',
+    strokePause: '일시 정지',
+    strokeReplay: '다시 재생',
+    strokePrevious: '이전 획',
+    strokeNext: '다음 획',
+    strokeProgress: '{total}획 중 {current}획',
+    strokeDiagram: '‘{char}’의 필순 애니메이션, 총 {total}획',
+    strokeLoading: '필순을 불러오는 중…',
+    strokeError: '필순을 불러오지 못했습니다.',
+    strokeRetry: '다시 시도',
+    strokeSource: '획 데이터',
     dict: '외부 사전',
     tierCn: { 1: '1급 한자', 2: '2급 한자', 3: '3급 한자' },
     tierTw: { 1: '상용 국자', 2: '차상용 국자' },
diff --git a/app/locales/zh-cn.ts b/app/locales/zh-cn.ts
index 69b0b18..f630cdf 100644
--- a/app/locales/zh-cn.ts
+++ b/app/locales/zh-cn.ts
@@ -104,6 +104,19 @@ export const zhCN = {
     unlistedFallback: '未收录 · 显示参考字形',
     stacked: '叠印',
     split: '并排',
+    strokeOrder: '日语汉字笔顺',
+    strokeHint: '连续播放，也可前后单步查看。',
+    strokePlay: '播放',
+    strokePause: '暂停',
+    strokeReplay: '重播',
+    strokePrevious: '上一笔',
+    strokeNext: '下一笔',
+    strokeProgress: '第{current}/{total}笔',
+    strokeDiagram: '「{char}」的笔顺动画，共{total}笔',
+    strokeLoading: '正在载入笔顺…',
+    strokeError: '笔顺暂时无法载入。',
+    strokeRetry: '重试',
+    strokeSource: '笔画数据',
     dict: '外部字典',
     tierCn: { 1: '一级字', 2: '二级字', 3: '三级字' },
     tierTw: { 1: '常用国字', 2: '次常用国字' },
diff --git a/app/locales/zh-hk.ts b/app/locales/zh-hk.ts
index 199e954..80f6ef0 100644
--- a/app/locales/zh-hk.ts
+++ b/app/locales/zh-hk.ts
@@ -106,6 +106,19 @@ export const zhHK: typeof zhCN = {
     unlistedFallback: '未收錄 · 顯示參考字形',
     stacked: '疊印',
     split: '並排',
+    strokeOrder: '日語漢字筆順',
+    strokeHint: '可連續播放，也可前後單步查看。',
+    strokePlay: '播放',
+    strokePause: '暫停',
+    strokeReplay: '重播',
+    strokePrevious: '上一筆',
+    strokeNext: '下一筆',
+    strokeProgress: '第{current}/{total}筆',
+    strokeDiagram: '「{char}」的筆順動畫，共{total}筆',
+    strokeLoading: '正在載入筆順…',
+    strokeError: '筆順暫時無法載入。',
+    strokeRetry: '重試',
+    strokeSource: '筆畫數據',
     dict: '外部字典',
     tierCn: { 1: '一級字', 2: '二級字', 3: '三級字' },
     tierTw: { 1: '常用國字', 2: '次常用國字' },
diff --git a/app/locales/zh-tw.ts b/app/locales/zh-tw.ts
index f94b4be..47eae06 100644
--- a/app/locales/zh-tw.ts
+++ b/app/locales/zh-tw.ts
@@ -106,6 +106,19 @@ export const zhTW: typeof zhCN = {
     unlistedFallback: '未收錄 · 顯示參考字形',
     stacked: '疊印',
     split: '並排',
+    strokeOrder: '日語漢字筆順',
+    strokeHint: '可連續播放，也可前後單步查看。',
+    strokePlay: '播放',
+    strokePause: '暫停',
+    strokeReplay: '重播',
+    strokePrevious: '上一筆',
+    strokeNext: '下一筆',
+    strokeProgress: '第{current}/{total}筆',
+    strokeDiagram: '「{char}」的筆順動畫，共{total}筆',
+    strokeLoading: '正在載入筆順…',
+    strokeError: '筆順暫時無法載入。',
+    strokeRetry: '重試',
+    strokeSource: '筆畫資料',
     dict: '外部字典',
     tierCn: { 1: '一級字', 2: '二級字', 3: '三級字' },
     tierTw: { 1: '常用國字', 2: '次常用國字' },
diff --git a/app/pages/char/[key].vue b/app/pages/char/[key].vue
index 036da48..d70d71f 100644
--- a/app/pages/char/[key].vue
+++ b/app/pages/char/[key].vue
@@ -222,6 +222,8 @@ const columnMark = (column: Column) =>
 const codePointRuns = computed(() => runs((cell) => cell.codePoint))
 const strokeRuns = computed(() => runs((cell) => cell.strokes))
 const tierRuns = computed(() => runs(tierLabel))
+/** KanjiVG records Japanese glyphs, independently of the visible columns. */
+const strokeChar = computed(() => row.value!.chars[REGIONS.indexOf('jp')]!)
 
 const readingRows = computed(() => {
   const readings = row.value?.readings
@@ -553,6 +555,8 @@ useSeoMeta({
           </table>
         </section>
 
+        <StrokeOrder :char="strokeChar" />
+
         <section class="flex flex-col gap-6">
           <span class="eyebrow">{{ t('char.dict') }}</span>
           <!-- One line per character the group is written with; a group with
diff --git a/app/utils/kanjivg.ts b/app/utils/kanjivg.ts
new file mode 100644
index 0000000..c3cf429
--- /dev/null
+++ b/app/utils/kanjivg.ts
@@ -0,0 +1,71 @@
+export const KANJIVG_HOME = 'https://kanjivg.tagaini.net/'
+export const KANJIVG_LICENSE = 'https://creativecommons.org/licenses/by-sa/3.0/'
+
+const DATA_ROOT = `${KANJIVG_HOME}kanjivg/kanji/`
+
+export interface KanjiVGStroke {
+  d: string
+  order: number
+}
+
+export interface KanjiVGData {
+  strokes: KanjiVGStroke[]
+  viewBox: string
+}
+
+/** KanjiVG names BMP files with a leading zero: 説 (U+8AAC) -> 08aac.svg. */
+export function kanjiVGFilename(char: string): string {
+  const codePoint = Array.from(char)[0]?.codePointAt(0)
+  if (codePoint === undefined) throw new Error('KanjiVG character is empty')
+  return `${codePoint.toString(16).padStart(5, '0')}.svg`
+}
+
+export const kanjiVGDataUrl = (char: string): string =>
+  `${DATA_ROOT}${kanjiVGFilename(char)}`
+
+export const kanjiVGViewerUrl = (char: string): string =>
+  `${KANJIVG_HOME}viewer.html?kanji=${encodeURIComponent(Array.from(char)[0]!)}`
+
+const attribute = (tag: string, name: string): string | undefined => {
+  const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const match = new RegExp(`\\s${escaped}=(['"])(.*?)\\1`, 's').exec(tag)
+  return match?.[2]
+}
+
+/**
+ * Keep the third-party XML out of the DOM. KanjiVG path tags use ordinary
+ * quoted attributes, so extracting only their numeric path data gives the
+ * renderer the useful part without importing styles, links or markup.
+ */
+export function parseKanjiVG(source: string): KanjiVGData {
+  const svg = /<svg\b[^>]*>/s.exec(source)?.[0]
+  const rawViewBox = svg ? attribute(svg, 'viewBox') : undefined
+  const viewBoxValues = rawViewBox
+    ?.trim()
+    .split(/[\s,]+/)
+    .map(Number)
+  const viewBox =
+    viewBoxValues?.length === 4 && viewBoxValues.every(Number.isFinite)
+      ? viewBoxValues.join(' ')
+      : '0 0 109 109'
+
+  const strokes = [...source.matchAll(/<path\b[^>]*>/gs)]
+    .map(([tag]) => {
+      const id = attribute(tag, 'id')
+      const d = attribute(tag, 'd')
+      const order = id ? Number(/-s(\d+)$/.exec(id)?.[1]) : Number.NaN
+      return { d, order }
+    })
+    .filter(
+      (stroke): stroke is KanjiVGStroke =>
+        Boolean(stroke.d) && Number.isInteger(stroke.order) && stroke.order > 0,
+    )
+    .toSorted((a, b) => a.order - b.order)
+
+  if (strokes.length === 0) throw new Error('KanjiVG file has no strokes')
+  return { strokes, viewBox }
+}
+
+/** Long sweeps should take visibly longer than a dot, within a calm range. */
+export const strokeDuration = (length: number): number =>
+  Math.round(Math.max(360, Math.min(780, length * 9)))
diff --git a/public/data/sources.json b/public/data/sources.json
index 48dd58e..a2edf6a 100644
--- a/public/data/sources.json
+++ b/public/data/sources.json
@@ -67,6 +67,27 @@
     "license": "Apache-2.0",
     "licenseUrl": "https://www.apache.org/licenses/LICENSE-2.0"
   },
+  {
+    "id": "kanjivg",
+    "use": {
+      "zh-CN": "日本字形笔顺动画",
+      "zh-TW": "日本字形筆順動畫",
+      "zh-HK": "日本字形筆順動畫",
+      "ja-JP": "日本字形の筆順アニメーション",
+      "ko-KR": "일본 자형 필순 애니메이션"
+    },
+    "name": "KanjiVG",
+    "homepage": "https://kanjivg.tagaini.net/",
+    "license": "CC BY-SA 3.0",
+    "licenseUrl": "https://creativecommons.org/licenses/by-sa/3.0/",
+    "note": {
+      "zh-CN": "使用 KanjiVG 的日本字形路径；不改变笔画形状，只按原笔次序着色播放。",
+      "zh-TW": "使用 KanjiVG 的日本字形路徑；不改變筆畫形狀，只按原筆次序著色播放。",
+      "zh-HK": "使用 KanjiVG 的日本字形路徑；不改變筆畫形狀，只按原筆次序着色播放。",
+      "ja-JP": "KanjiVGの日本字形パスを使用しています。筆画の形状は変更せず、元の順序で色を付けて再生します。",
+      "ko-KR": "KanjiVG의 일본 자형 경로를 사용합니다. 획 모양은 바꾸지 않고 원래 순서대로 색을 입혀 재생합니다."
+    }
+  },
   {
     "id": "hanzi-chars",
     "use": {
diff --git a/scripts/sources.ts b/scripts/sources.ts
index e3359a8..bb3d7b7 100644
--- a/scripts/sources.ts
+++ b/scripts/sources.ts
@@ -122,6 +122,32 @@ export const SOURCES: Source[] = [
     license: 'Apache-2.0',
     licenseUrl: 'https://www.apache.org/licenses/LICENSE-2.0',
   },
+  {
+    id: 'kanjivg',
+    use: {
+      'zh-CN': '日本字形笔顺动画',
+      'zh-TW': '日本字形筆順動畫',
+      'zh-HK': '日本字形筆順動畫',
+      'ja-JP': '日本字形の筆順アニメーション',
+      'ko-KR': '일본 자형 필순 애니메이션',
+    },
+    name: 'KanjiVG',
+    homepage: 'https://kanjivg.tagaini.net/',
+    license: 'CC BY-SA 3.0',
+    licenseUrl: 'https://creativecommons.org/licenses/by-sa/3.0/',
+    note: {
+      'zh-CN':
+        '使用 KanjiVG 的日本字形路径；不改变笔画形状，只按原笔次序着色播放。',
+      'zh-TW':
+        '使用 KanjiVG 的日本字形路徑；不改變筆畫形狀，只按原筆次序著色播放。',
+      'zh-HK':
+        '使用 KanjiVG 的日本字形路徑；不改變筆畫形狀，只按原筆次序着色播放。',
+      'ja-JP':
+        'KanjiVGの日本字形パスを使用しています。筆画の形状は変更せず、元の順序で色を付けて再生します。',
+      'ko-KR':
+        'KanjiVG의 일본 자형 경로를 사용합니다. 획 모양은 바꾸지 않고 원래 순서대로 색을 입혀 재생합니다.',
+    },
+  },
   {
     id: 'hanzi-chars',
     use: {
diff --git a/scripts/tests/kanjivg.test.ts b/scripts/tests/kanjivg.test.ts
new file mode 100644
index 0000000..8ff4b08
--- /dev/null
+++ b/scripts/tests/kanjivg.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import {
+  kanjiVGDataUrl,
+  kanjiVGFilename,
+  kanjiVGViewerUrl,
+  parseKanjiVG,
+  strokeDuration,
+} from '../../app/utils/kanjivg.ts'
+
+describe('KanjiVG data', () => {
+  it('uses KanjiVG code-point filenames', () => {
+    expect(kanjiVGFilename('説')).toBe('08aac.svg')
+    expect(kanjiVGFilename('𠮷')).toBe('20bb7.svg')
+    expect(kanjiVGDataUrl('説')).toBe(
+      'https://kanjivg.tagaini.net/kanjivg/kanji/08aac.svg',
+    )
+    expect(kanjiVGViewerUrl('説')).toBe(
+      'https://kanjivg.tagaini.net/viewer.html?kanji=%E8%AA%AC',
+    )
+  })
+
+  it('extracts and orders only numbered stroke paths', () => {
+    const data = parseKanjiVG(`
+      <svg viewBox="0 0 120 120">
+        <path id="guide" d="M0 0L1 1" />
+        <path d="M2 2L3 3" id="kvg:test-s2" />
+        <path id="kvg:test-s1" kvg:type="dot" d="M0 0L2 2" />
+      </svg>
+    `)
+    expect(data).toEqual({
+      viewBox: '0 0 120 120',
+      strokes: [
+        { order: 1, d: 'M0 0L2 2' },
+        { order: 2, d: 'M2 2L3 3' },
+      ],
+    })
+  })
+
+  it('rejects an SVG without stroke data', () => {
+    expect(() => parseKanjiVG('<svg />')).toThrow('no strokes')
+  })
+
+  it('keeps animation timing within its readable range', () => {
+    expect(strokeDuration(1)).toBe(360)
+    expect(strokeDuration(60)).toBe(540)
+    expect(strokeDuration(1_000)).toBe(780)
+  })
+})