【SVGアニメーション】グラデーションで色が動く画像を作ってみました◎

さやさんです。

私のブログ担当ジャンルが『テクニカルコーダー』とのことで、
毎回微妙に専門的？　なお話の記事になってしまうのですが、
コーダーの仕事をなるべく難しくなく、かつ楽しく伝えられるように頑張りますね。

さて、今回のテーマは『SVGアニメーション』です。
以前のブログにも書きましたが、最近SVGアニメーションにハマっている私です。
SVGアニメーションについてはこちら

ホームページを可愛くおしゃれに彩るアニメーション。
その表現方法は色々とありますが、
元SEな私は裏で色々動かすためのコードを書いたりできるSVGアニメーションが
プログラミングっぽくて楽しいと感じる……の、かも？

今回はSVG画像に動くグラデーション色を指定してできる
グラデーションで色が動くちょっとおしゃれな画像の表現を紹介したいと思います。

そんなわけで、
流れるグラデーション色のSVG画像はこちら↓

See the Pen
zYYBVKo by sasayama (@sasayama)
on CodePen.

ハロウィンっぽい雰囲気と色にしたかったのですが、
すごい色合いになってしまいました……。
いつも素敵な配色でデザインを仕上げるデザイナーさん、尊敬します。

★ちょこっと解説
インラインSVGにcssでグラデーション色を指定しています。
SVGには通常のグラデーションのプロパティ（linear-gradient）が使えないのですが、
代わりにlinearGradientタグというのがあり、そのタグを利用することでグラデーションを表現できます。
linearGradientでのグラデーションの指定の仕方はタグに直接記述するなどの方法もあるのですが、
今回はcssにグラデーションのアニメーションを記述する方法でコードを書きました。
動くグラデーションのアニメーションが指定されたlinearGradientをSVGのpathに指定することで、
pathにアニメーションが適用されます。

配色はすごいことになってしまいましたが、
グラデーションが動くだけでとてもおしゃれに見えると思いませんか？

アニメーションを作るのは決して簡単なことではありません。
でも、このようなちょっとした表現をコーディングで加えるとより素敵なホームページになるので、
色々と表現を学んでいきたいですね。