SVG ライン手描き風アニメーション
SVG のパスが一筆書きのように描かれていくアニメーションです。仕組みは stroke-dasharray で線を長い破線に見立て、 stroke-dashoffset でその破線を線の長さ分だけずらして隠し、アニメで 0 に戻すことで「描かれていく」ように見せています。
解説
SVG のパスが一筆書きのように描かれていくアニメーションです。仕組みは stroke-dasharray で線を長い破線に見立て、stroke-dashoffset でその破線を線の長さ分だけずらして隠し、アニメで 0 に戻すことで「描かれていく」ように見せています。この例ではチェックマークの長さに合わせ両方を 120 に設定。@keyframes と cubic-bezier のイージングで自然な手描き感を出し、JavaScript を一切使わず CSS だけで完結します。stroke-linecap:round で線端が丸くなり、やわらかい印象になります。
使う場面
- フォーム送信完了や決済成功時のチェックマーク登場
- ロゴや署名を線画で描き起こすブランド演出
- 装飾的な下線・アンダーラインのアクセント
別の図形に使うときは、その path の実際の長さに stroke-dasharray と stroke-dashoffset を合わせるのがコツです。長さは path.getTotalLength() で取得できます。色は stroke、太さは stroke-width で変更可能。動きが苦手なユーザーへ配慮するなら prefers-reduced-motion で stroke-dashoffset:0 を即適用し、最初から描き終えた状態を見せると安心です。
使用例・適したシーン
- ロゴアニメーション
- チェックマーク登場
- 装飾線・イラスト導入
よくある質問
自分の図形やロゴに使うときのコツは。
stroke-dasharrayとstroke-dashoffsetの値を、その線の実際の長さに合わせます。長さはブラウザのコンソールでpath.getTotalLength()を実行すると取得できます。値が短いと描画が途中で止まり、長すぎると最初に余白が出ます。
線の色や太さは変えられますか。
変えられます。pathのstroke属性で色、stroke-widthで太さを指定します。端を丸くするstroke-linecap:roundや角を丸めるstroke-linejoin:roundを使うと、手描きのやわらかさが出ます。