Blobs – 線上免費產生 Blobs 圖形，可調整大小形狀、漸變顏色並產生 SVG 格式與支援 Flutter 程式匯入

Blobs 是一款能夠幫助你快速建立一個 Blobs 的免費線上工具，他能夠讓你產生類似圓形、多邊圓形的物體，並起能夠讓你調整他的大小與複雜度，進而產生獨一無二的一個物件。

除了能夠隨意調整 Blobs 形狀的體積大小與複雜度之外，他還提供了 5 種不同的設置功能，能夠讓你將顏色、漸變色、圖案、圖片、輪廓…等等，應用到你所產生的 Blobs 當中，相當有趣。

最後完成時，你可以直接複製所產生 Blobs 的 SVG 程式碼，或者直接下載 SVG 格式的圖片檔案，他甚至還支援 Flutter 程式碼，能夠直接複製應用到 Flutter 程式當中使用，可謂是非常方便。

網站名稱：Blobs – Generate beautiful blob shapes for web and flutter apps
網站網址：https://blobs.app/

Blobs 簡介教學

Step 1

首先進入網站後，畫面非常簡潔，左側就是即時顯示 Blobs 的樣貌，而你可以透過右側的各種設置選項來調整 Blobs 圖形的外觀：

Pin

Blobs 右側的功能說明如下：

1. 「Randomness」可以放大縮小 Blobs 圖形的體積大小，越小表示圖形的隨機性越高。
2. 「Complexity」可以增加或減少 Blobs 圖形的節點數量，越大表示圖形的複雜度越高。

你可以自己動手玩玩看調整後的效果如何，會比較容易理解這兩項設置的功能與效果。

接著是下方的各種顏色效果，能夠設 定Blobs 圖形的顏色為單色或漸變色…等等效果，這部分的說明如下：

1. 「Color」可以設定 Blobs 圖形為單個顏色
2. 「Gradient」可以設定 Blobs 圖形為漸變顏色
3. 「Pattern」可以設定 Blobs 圖形的背景圖案
4. 「Image」可以設定 Blobs 圖形的背景為你所設定的圖片
5. 「Outline」可以設定 Blobs 圖形的樣式為輪廓效果

Step 2

在了解所有設置功能之後，接著你就可以開始藉由設定產生 Blobs 圖形了。由於右側的 Randomness 與 Complexity 是會隨機產生的數值，因此你可以透過左側圖片下方的「Change blob」來不斷產生不同的結果，你會發現每次所產生的 Blobs 形狀都會有所不同，你可以透過這個方式挑選你喜歡的效果。

Pin

Step 3

當你設計完成後，就可以點選「Change blob」按鈕左側的程式碼圖示，接著就會彈跳出 SVG 程式碼，你可以複製 Code 直接貼至你的專案中顯示 Blobs 圖形，或者也能夠直接下載 SVG 格式的圖片檔案，完全免費：

Pin

Step 4

另外他也提供 Flutter 的匯入方式，點選「Change blob」按鈕右側的 Flutter 圖示後，就會跳出 Flutter 的匯入程式碼，複製後即可加入到你的 Flutter 程式當中顯示你所設計的 Blobs 圖形：

Pin