このホームページのトップにも使っているSVGアニメーションですが、これはあるだけでサイトのクオリティがちょっと上がった気がしますよね。
実装するのはなんだか大変そうなイメージがありますが、実はとっても簡単です。

工程はこのようになります↓

1. IllustratorやXdを使って、元になるSVG画像を作成
2. 作成した画像をSVGで保存
3. 画像をテキストエディタで開く
4. SVGの要素（path/rect/circleなど）に以下のclassとstrokeを付与
　 class=”animation” stroke=”#000″（任意のクラスと線の色）
5. CSSにアニメーションを記述

これだけです！
実装するとこんな感じです↓

See the Pen
RdWNRr by Show Design Lab (@ShowDesignLab)
on CodePen.

これだけでサイトのクオリティが上がると思えば、やってみない手はありませんね。

今回は下記ページを参考にさせていただきました。CSSでアニメーションさせる以外にXMLを使う方法もあるようです。
詳しく知りたい方はご参照ください。

https://boel.jp/tips/vol76_svganim.html

TAG / SVG, HTML, CSS, CSS3, SVGアニメーション