ブックマークしておくと便利! 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ
Post on:2022年8月10日
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。
ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。

fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。
生成した素材は、個人でも商用プロジェクトでも無料で利用できます。
ツールはかなりたくさんあり、その中からいくつか紹介します。

nnneon
ネオンカラーのSVGシェイプを生成するツール。

nnnoise
SVGのノイズ テクスチャを生成するツール。

mmmotif
アイソメトリックのSVG背景を生成するツール。

uuunion
波状のメッシュグラデーションを生成するツール。

ffflux
SVGの滑らかなぼかしグラデーション背景を生成するツール。

gggrain
粒子の粗いSVGグラデーションを生成するツール。

cccolor
UIデザイン用のクリーンでシンプルなカラーパレットを生成するツール。

pppalette
スマホ用のフレンドリーなカラーパレットを生成するツール。

sssurf
SVGの波状の背景を生成するツール。

uuundulate
等高線のような有機的な起伏のある形状を生成するツール。

bbblurry
SVGのぼやけた背景を生成するツール。

oooscillate
SVGの波線パターンを生成するツール。

ffflurry
SVGの未来的な線パターンを生成するツール。

cccoil
SVGのらせん状のスパイラルを生成するツール。

cccircular
SVGのサークル状のパターンを生成するツール。

tttwinkle
爆発、バーストをラインで生成するツール。

ssscales
グラデーション スケールのパターンを生成するツール。

rrrainbow
サークルでカラフルなSVG背景を生成するツール。

ttten
10 PRINTにインスパイアされたSVGのパターンを生成するツール。

gggyrate
幾何学的形状を回転させたSVGのパターンを生成するツール。

ssspill
スピル/メルト エフェクトを生成するツール。

wwwhirl
SVGのねじれ線パターンを生成するツール。

rrreflection
繰り返される反射円パターンを生成するツール。
sponsors