SVGの動くグラデーションを作成できるSVGグラデーションアニメーターを公開いたしました。

こちらから試すことができます。

SVGとは

ベクター形式の画像フォーマット。画質が劣化せず、ファイルサイズが少ないのが特徴。アニメーションにも対応。

SVGグラデーションアニメーターとは

Webを扱うデザイナー・エンジニア向けのSVGの動くグラデーションを作成できるツールです。

動くグラデーションの色を変えて、オリジナルのグラデーションアニメーションを作れます。

現在、使用できるグラデーションのパターンは3種類ですが、随時、パターンを追加予定です。

特徴

簡単に作れる

色を変えるだけで、簡単にSVGアニメーションを作成できます。

画質が劣化せず軽量

SVGのため、画像が劣化せず軽量です。ローディング時間を縮め、画質が良いのでWebサイトの画像、背景に最適です。

デザインの幅が広がる

複雑で専用のソフトがないと扱いづらいため、グラデーションアニメーションに手を出しにくいと思われがちです。しかし、このツールは簡単にWebデザインアニメーションを取り込むことができるので、デザインの幅が広がります。

作成例

このツールで作成できるグラデーションを紹介します。

2023年1月6日公開