{
"id": "motion:motion-svg-line-draw",
"slug": "motion-svg-line-draw",
"kind": "motion",
"title": {
"ja": "SVGラインドロー",
"en": "SVG line drawing"
},
"aiName": "SVG line drawing",
"summary": {
"ja": "線が描かれていく",
"en": "Lines draw themselves as the page scrolls"
},
"number": 13,
"group": "scroll-linked",
"techniques": [
"scroll-progress",
"svg"
],
"rules": [
{
"ja": "線は pathLength=1 で描き、描画の進みは --p だけで決める",
"en": "Draw each line with pathLength=1 and drive the drawn length from --p alone"
},
{
"ja": "スクロールを戻すと線も戻る",
"en": "Scrolling back up undraws the lines"
},
{
"ja": "動きを減らす設定では、描き終わった形を表示する",
"en": "With reduced motion, show the lines fully drawn"
}
],
"reproduction": {
"prompt": {
"ja": "SVGラインドロー — SVG line drawing\n\n見出しの下に、3 本の SVG の曲線を描く。3 本は p の 0〜0.36、0.32〜0.68、0.64〜1.00 の区間で順に描かれ、隣とわずかに重なる。\n各線は 0% から 100% まで、スクロール量に合わせて左から右へ描かれる。\n線は accent の色、太さ 4px、端は丸くし、背景には rule の色で水平のグリッド線を 3 本引く。\n見出しと線は画面上端に固定し、300vh の区画を下へスクロールする間だけ描画が進む。上へ戻すと線も戻る。\nCSS の stroke-dasharray と stroke-dashoffset だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 線は pathLength=1 で描き、描画の進みは --p だけで決める\n- スクロールを戻すと線も戻る\n- 動きを減らす設定では、描き終わった形を表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-svg-line-draw/demo.html",
"en": "SVG line drawing — SVG line drawing\n\nDraw three SVG curves under a heading. Each line is drawn from 0% to 100% as the scroll progress p moves through its own window: 0 to 0.36, 0.32 to 0.68, and 0.64 to 1.00, so neighbouring windows overlap slightly.\nThe lines move from left to right in step with the scroll amount.\nStrokes use the accent colour at 4px with round caps, over three horizontal grid lines in the rule colour.\nThe heading and the drawing stay fixed at the top of a 300vh section, and the drawing advances only while scrolling down; scrolling back up undraws the lines.\nImplement with CSS stroke-dasharray and stroke-dashoffset only, with no libraries.\n\nDo not drop:\n- Draw each line with pathLength=1 and drive the drawn length from --p alone\n- Scrolling back up undraws the lines\n- With reduced motion, show the lines fully drawn\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-svg-line-draw/demo.html"
},
"code": {
"url": "https://design-vault.pages.dev/designs/motion-svg-line-draw/demo.html",
"html": "\n\n\n\n\n13 SVGラインドロー — SVG line drawing\n\n\n\n\n