SVGアニメーションのサンプルを作ってみよう！

こんにちは！コーダーの平原です！
SVGを使ったアニメーションについて理解を深めたいなと思い、色々サンプルを作ってみました。SVGは、書き出しやCSSプロパティなどが、他の画像の扱いとまるで異なる為、隙間時間で慣れておきたいところです。
それではサンプルをご覧ください！

1. サンプルその1 「JAPAN」
2. サンプルその2 「TAIWAN」
3. サンプルその3 「SUN」
4. まとめ

1. サンプルその1 「JAPAN」

Webサイトのローディング時などでよく見る、ロゴやテキストのアニメーションです。
文字のアウトラインをなぞりながら描画されていく動きは人気がありますね。

2. サンプルその2 「TAIWAN」

こちらも先程と同様の、ロゴやテキストのアニメーションの2パターン目です。
綺麗な画質でアニメーションしてくれることの喜びを噛みしめたくなりますね。

3. サンプルその3 「SUN」

SVGで円を描画する時に使用する、circle要素で作成したアニメーションです。
サンサンと輝く太陽をイメージして作りました。
(※右下の「Rerun」ボタンで再生されます。スマートフォンの場合は、「Result」ボタンを2回クリックすると「Rerun」ボタンが表示されます。)

4. まとめ

SVGアニメーションのサンプルを作ってみて、アニメーション作成時によく使用されているCSSプロパティは、線の間隔を指定する「stroke-dasharray」プロパティと、線のはじまりの位置を指定する「stroke-dashoffset」プロパティだということがわかりました。
また、今回はSVGの書き出しを「illustrator」で行い、圧縮は「SVGOMG」というツールを使用したのですが、他のアプリケーションや圧縮ツールも色々と試してみたいです。
そして行く行くは、SVGのpath要素のd属性の座標を自由自在に書けるようになったらカッコいいなと思いました！