ブックマークしておくと便利! 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ
Post on:2022年8月10日
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。
ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。
![背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツール](http://coliss.com/wp-content/uploads-202203/2022080901@2x.png)
fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。
生成した素材は、個人でも商用プロジェクトでも無料で利用できます。
ツールはかなりたくさんあり、その中からいくつか紹介します。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-01.png)
nnneon
ネオンカラーのSVGシェイプを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-02.png)
nnnoise
SVGのノイズ テクスチャを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-03.png)
mmmotif
アイソメトリックのSVG背景を生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-04.png)
uuunion
波状のメッシュグラデーションを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-05.png)
ffflux
SVGの滑らかなぼかしグラデーション背景を生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-06.png)
gggrain
粒子の粗いSVGグラデーションを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-07.png)
cccolor
UIデザイン用のクリーンでシンプルなカラーパレットを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-08.png)
pppalette
スマホ用のフレンドリーなカラーパレットを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-09.png)
sssurf
SVGの波状の背景を生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-10.png)
uuundulate
等高線のような有機的な起伏のある形状を生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-11.png)
bbblurry
SVGのぼやけた背景を生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-12.png)
oooscillate
SVGの波線パターンを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-13.png)
ffflurry
SVGの未来的な線パターンを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-14.png)
cccoil
SVGのらせん状のスパイラルを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-15.png)
cccircular
SVGのサークル状のパターンを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-16.png)
tttwinkle
爆発、バーストをラインで生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-17.png)
ssscales
グラデーション スケールのパターンを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-18.png)
rrrainbow
サークルでカラフルなSVG背景を生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-19.png)
ttten
10 PRINTにインスパイアされたSVGのパターンを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-20.png)
gggyrate
幾何学的形状を回転させたSVGのパターンを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-21.png)
ssspill
スピル/メルト エフェクトを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-22.png)
wwwhirl
SVGのねじれ線パターンを生成するツール。
![ツールのキャプチャ](http://coliss.com/wp-content/uploads-202203/2022080902-23.png)
rrreflection
繰り返される反射円パターンを生成するツール。
sponsors