リッチなicon表示で差をつける。CSSでSVGアニメーションをつくる方法

ハウツー
コロのicon
コロ

SVG iconを用意する

An image from Notion
この記事ぶりのエイリアン
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M11 17a2.5 2.5 0 0 0 2 0" /> <path d="M12 3c-4.664 0 -7.396 2.331 -7.862 5.595a11.816 11.816 0 0 0 2 8.592a10.777 10.777 0 0 0 3.199 3.064c1.666 1 3.664 1 5.33 0a10.777 10.777 0 0 0 3.199 -3.064a11.89 11.89 0 0 0 2 -8.592c-.466 -3.265 -3.198 -5.595 -7.862 -5.595z" /> <line x1="8" y1="11" x2="10" y2="13" /> <line x1="16" y1="11" x2="14" y2="13" /> </svg>
https://tablericons.com/ のiconを使用しています。

主要プロパティ

svg : svgタグ
xmlns="http://www.w3.org/2000/svg" : お決まりの記述。svgを使いますよという宣言
fill : 塗り潰し
stroke : アウトラインの色
stroke-width : 線の太さ
stroke-linecap : 線の端の状態(butt, round, square)
stroke-linejoin : 線のつなぎ目の状態(miter, round, bevel)
path : 曲線や図形などを描画するためのタグ
line :直線を描画

アニメーションで使用するプロパティ

stroke-dasharray :線の間隔
stroke-dasharray: 3; なら3px間隔の点線になる
stroke-dashoffset : 線の始まりの位置
Codepenで動きを確認

SVGにスタイルをあてる

svg path { animation: path-anim 3s ease-in both infinite; } svg line { animation: line-anim 3s ease-in-out both infinite; } @keyframes path-anim { to { stroke-dashoffset: 0; } from { stroke-dasharray: 235; stroke-dashoffset: 235; } } @keyframes line-anim { to { stroke-dashoffset: 0; } from { stroke-dasharray: 139; stroke-dashoffset: 139; } }
💡
stroke-dasharrayは、線が全て描画される長さを指定します。
点線状態ではうまくアニメーションされない場合があります。
動かないときは数値を大きくして確認してみてください。
💡
各path, line要素にアニメーションを用意して、stroke-dashoffsetをずらせばバラバラのタイミングでiconが描画されてよりリッチな見た目になります

完成品

今回はフリー素材のiconを使用しましたが、イラストレーターでオリジナルロゴを作成すれば
サイトのロゴを簡単にアニメーション表示できます。
CSS
SVG
コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい