SVGとCSSを使用してパスのアニメーションを実装する

サイト内で見かけるパスのアニメーション。あまり使う機会がないのだけれど、必要の際に思い出せるようにCSSとSVGを使用して実装方法をメモ。

HTML

<div class="path__wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="79.82" height="33.09" viewBox="0 0 79.82 33.09">
<path d="M953.39-90.53c-19.23,6.84-17.13,12.21-12.87,15.74,10.57,8.76-18.56,19.12-21,16-3.21-4.07,35.73-29.34,38.74-21.15.3.83,0,1.88-2.21,5.62-2.46,4.19,8.68,3.25,14.57-5.57,0,0-14,18.49-16.47,19.57-3.08,1.34-3.12-1.88.73-3.47,2.65-1.09,19.22-9.88,26.36-16.1,0,0-8.48,6.77-4.09,7.86s12.82-7.08,13.6-7.37c0,0-5.92,8.05,2.17,3.78a17.61,17.61,0,0,0,5.48-4.61" transform="translate(-918.88 90.92)" />
</svg>
</div>

CSS

.path__wrap {
	width: 90%;
	margin: 0 auto;
}
svg {
	width: 100%;
	height: auto;
}
path {
	stroke: #0099d9;
	stroke-width: 0.2px;
	fill: none;
	stroke-dasharray: 300; /* パスの全長を設定 */
	stroke-dashoffset: 300; /* アニメーション開始時にパスを非表示 */
	animation: draw 2s linear infinite;
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

「stroke-dasharray」を使用して線が全て埋まるまでの数値（パスの全長）を指定。
次に「stroke-dashoffset」を使用して上記パスの開始位置が0になるまでオフセット（パスの全長と同じ値を指定）。
こうすることで初期状態ではパスが全く描かれていない状態になります。
この状態から「animation」プロパティを使用してオフセットを0まで変化させることでパスが描かれていくようなアニメーションになります。

プロパティ	公開
stroke	パスの色を指定する
stroke-width	パスの太さを指定する
fill	パスで囲まれた面の色を指定する。 パスアニメーションの場合は無色にする場合が多い
stroke-dasharray	パスの間隔を指定する（破線にする）
stroke-dashoffset	破線のオフセット（打消し量）を後ろから指定する

サンプル

尚、パスのアニメーションの方向が反対になった場合の対処法と、書き出したSVGの形式がポリライン（polyline）だった場合の対処法は下記になります。
それぞれイラストレーターでの「パスの方向反転」、「複合パス作成」で解決可能です。

• MacのSafariとスマホだけSVGのpathアニメーションが逆再生されるときの原因と解決方法
• たったこれだけ！SVGのpolylineをpathに変換する方法