SVGアニメーションを簡単に作れるツールを紹介します。

使うツールは「SVG グラデーション アニメーター」と言います。

このツールは、簡単にSVGのグラデーションのアニメーションを作れます。

SVGアニメーションの作り方

このステップでアニメーションを作れます！

1. SVG グラデーション アニメーター にアクセス

2. 使いたいアニメーションパターンを選択

3. 好きな色に変える

4. ダウンロードするだけ

SVG グラデーション アニメーター にアクセス

https://technologies.anharu.me/tools/gradient-svg にアクセスしてください。

こちらのような画面です↓

使いたいアニメーションパターンを選択

現在使えるパターン

• 回る円形グラデーション

• 波のグラデーション

• 横に動くグラデーション

右上のメニューからアニメーションを変えられます。

好きな色に変える

右側のパネルから色を変えられます。色を変えると即時に反映されるので、好きな色に調整してみてください！

ダウンロードするだけ

プレビューの右下のボタンからSVGをダウンロードできます。

あなたのWebサイトに使用してみてください！

関連記事

• SVGグラデーションアニメーターを公開

• グラデーションのアニメーションの背景をReactで設定するには（SVG、Canvas、動画、CSS比較）

2023年1月9日公開