SVG Blob生成器
SVG Blob生成器工具
關於 SVG Blob 產生器
SVG Blob 產生器利用三次貝茲曲線建構有機的、不規則閉合形狀，並匯出為可直接貼上的 SVG 標記。它會沿圓形取樣 N 個點，附帶隨機徑向偏移，再透過相鄰點的切線計算進行平滑處理，最終將所有點連接成一條閉合的 <path>。即時預覽與可複製的程式碼區塊讓您能立即取得結果。
使用方法
1. 調整「複雜度（Complexity）」滑桿（3 到 12），設定構成 blob 的錨點數量。 2. 調整「隨機度（Randomness）」滑桿（0.10 到 1.00），控制每個點相對於基準半徑的漂移幅度。 3. 設定正方形 viewBox 的「大小（Size）」（100 到 500px）。 4. 選用：調高「筆畫寬度（Stroke Width）」（0 到 10），新增一條與填色相同的輪廓線。 5. 透過色板選擇「填滿色彩（Fill Color）」。 6. 點擊「隨機（Randomize）」（或微調任一滑桿）重新產生形狀。 7. 點擊「複製（Copy）」將產生的 SVG 程式碼複製到剪貼簿。
SVG 輸出格式
匯出的標記是一個單獨的 <svg>，帶有 0 0 {size} {size} 的正方形 viewBox。其中包含一條 <path>，其 d 屬性是一串以 Z 閉合的 C（三次貝茲）指令。平滑係數固定為 0.2，由每個點相鄰兩點之間的向量推導而得。當筆畫寬度大於 0 時，路徑還會附帶 stroke 與 stroke-width 屬性，顏色與填色相同；否則只輸出 fill。
▶為什麼在相同設定下，兩次點擊「隨機」會得到不同的形狀？
每次隨機都會更新內部的隨機種子，並基於 JavaScript 的 Math.random() 重新執行點產生器。設定只決定取值範圍，具體形狀每次都是重新取樣得到的。
▶我可以讓 blob 大於 500px 嗎？
無法透過滑桿達成，滑桿上限為 500。但由於輸出使用 viewBox 而非固定尺寸，複製後您可以透過 CSS 的 width 與 height 任意縮放該 SVG。
▶筆畫顏色是否與填色一致？
是的。元件將 stroke 與 fill 都設為同一個「填滿色彩（Fill Color）」值，且僅當「筆畫寬度（Stroke Width）」大於 0 時才會輸出 stroke。
▶我的資料會上傳到伺服器嗎？
不會。所有處理都在您的瀏覽器本機完成，您的輸入永遠不會離開您的裝置。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。