ロゴの線を描く
stroke-dashoffset
線が引かれていくようにロゴやアイコンを描く。CSS のアニメーションだけで作れる。
AIへの頼み方
このロゴの SVG を、線が引かれていくアニメーションで表示してください。各パスの pathLength を 1 に正規化して、stroke-dashoffset を 1 から 0 に動かす方法でお願いします。prefers-reduced-motion: reduce の環境では、最初から描き終わった状態にしてください。
動くデモ
右下のボタンで再生と停止を切り替えられます。動きを減らす設定の端末では停止した状態で始まります。
全画面で見る ↗最小コード
/* HTML 側：<path pathLength="1" d="..." /> と書いておく。
pathLength="1" は「この線の長さを 1 として扱う」という宣言。
実際の長さを JS で測らなくてよくなるのがポイント。 */
.line {
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-dasharray: 1; /* 線1本ぶんの破線 */
stroke-dashoffset: 1; /* まるごとずらす＝見えない */
animation: draw 1.1s ease forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0 } /* ずれを戻す＝引かれていくように見える */
}
/* 複数の線を順番に描くなら delay をずらすだけ */
.line:nth-child(2) { animation-delay: .45s }
.line:nth-child(3) { animation-delay: .55s }
@media (prefers-reduced-motion: reduce) {
.line { animation: none; stroke-dashoffset: 0 }
}対応状況
定番 2026年08月時点で確認
webstatus.dev に個別の feature 登録がないため caniuse / MDN で確認。SVG 1.1 の presentation attribute で、主要ブラウザが長年サポート（IE9 以降）。pathLength での正規化も同様に広く使える。
実案件でそのまま使える。古い環境でも動く。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
ロゴやアイコンの登場演出に向く。トップページを開いた瞬間や、会社紹介の冒頭に置くと、静止画を貼るより印象に残る。実装も軽く、画像を差し替えるだけの手間で見栄えが変わる。
線でできた図形にしか効かないのがいちばん大事な前提。塗りつぶしのイラストや写真では使えない。まず線画にできるかどうかを確かめる。
pathLength を 1 にしておくと、線の実際の長さを測らずに済む。JavaScript で長さを取得して代入する昔ながらのやり方は、もう要らない。
避けたいのは長すぎる演出。全体で1秒から1秒半くらいに収める。3秒かけて描くと、2回目に見た人には待ち時間になる。同じ人が何度も訪れるページなら、そもそも毎回描き直さない選択もある。
線の数が多い図形も向かない。線を1本ずつ順番に描くと、20本あれば20回分の時間がかかる。細かいイラストより、線が10本以内の記号のほうがきれいに決まる。
動きを減らす設定の人には、描き終わった状態で見せる。途中で止めると、ロゴが欠けたまま表示されてしまう。