SVG 波浪產生器
免費線上 SVG 波浪產生器：可疊加 1-5 層平滑波浪，調整基線、振幅、波長與平滑度，套用雙色漸層並匯出向量原始碼。
SVG 波浪產生器是做什麼的？
它把裝飾性波浪形狀產生為可直接使用的 SVG 程式碼。你可以疊加 1-5 層波浪，每層都有獨立的基線高度、振幅、波長與平滑度，且所有圖層共用同一條雙色線性漸層。
波浪曲線是怎麼畫出來的？
每一層都由內建的路徑產生器輸出：波形按半個波長分段，每段用三次貝茲控制點繪製。這樣檔案極小，而且在任何縮放層級下都保持完全平滑。
平滑度滑桿改變的是什麼？
0% 時各段退化為直線，波形呈鋸齒狀；調高滑桿會讓貝茲控制點外移，100% 時得到完整的正弦形曲線。
匯出的 SVG 可以用在哪裡？
任何接受 HTML 或 SVG 的地方都可以：首屏背景、頁面區塊分隔線、頁尾、簡報和設計工具。把複製的程式碼直接貼進 HTML，或用下載按鈕保存 .svg 檔案。
波浪放大後還會清晰嗎？
會。匯出內容保留 1440x480 的 viewBox，是純向量幾何圖形。拉伸到 100% 頁面寬度或放大到印刷尺寸，曲線都不會模糊或出現像素點。
隨機產生按鈕是怎麼運作的？
它會隨機選擇 1-5 的圖層數、為每個圖層參數取新的隨機值，並產生兩個協調的隨機顏色，然後立即重繪預覽。不滿意就多按幾次。
可以使用自己的品牌色嗎？
可以。兩個取色器分別設定所有圖層共用的線性漸層的起訖色，改一下就能讓整組波浪同時換色。
資料會上傳到伺服器嗎？
不會。產生器完全在瀏覽器裡用原生 JavaScript 執行，你的顏色與設定不會離開頁面，匯出檔案也是在本機產生的。
如何使用SVG 波浪產生器
SVG 波浪產生器可產生乾淨、即貼即用的多層波浪 SVG 程式碼。每一層都是由雙色線性漸層填滿的平滑三次貝茲曲線，非常適合做首屏背景、頁面分隔線與頁尾裝飾。所有內容均在瀏覽器中產生，不會上傳任何資料。
- 在「圖層數」選擇器中選擇 1-5 層。圖層按從後到前的順序繪製，新圖層會覆蓋在之前的圖層之上。
- 用兩個取色器選擇漸層的起始色與結束色，所有圖層共享這條線性漸層。
- 用每層的四個滑桿微調：「基線高度」上下移動波浪，「振幅」控制波峰高度，「波長」控制相鄰波峰的水平距離，「平滑度」在 0% 折線與 100% 完整正弦形貝茲曲線之間過渡。
- 按「隨機產生」可以瞬間得到全新的層數、形狀與顏色組合，直到滿意為止。
- 按「下載 SVG」儲存 .svg 檔案，或按「複製原始碼」把完整 SVG 標記複製到剪貼簿，直接貼進任何 HTML 檔案或設計工具即可使用。
用作網站區塊分隔線時，把 SVG 放在兩個區塊之間並讓它拉伸到 100% 寬度——viewBox 會保證曲線在任意尺寸下不變形。低平滑度配短波長是手繪感，全平滑配長波長則像平靜的海面。
相關工具
- SVG最佳化工具 在瀏覽器中即時最佳化和壓縮SVG檔案。移除元資料、註解、編輯器冗餘數據，檔案大小最多可減少60%。
- SVG轉PNG轉換器 在瀏覽器中即時將SVG轉換為PNG、JPEG或WebP。支援自訂縮放、尺寸和背景色。免費、隱私保護、無需上傳。
- PNG 轉 SVG 轉換器 免費線上 PNG 轉 SVG 工具。將 PNG、JPG 等點陣圖轉換為可縮放的向量 SVG，可調顏色數與細節，全程瀏覽器本地處理，無需上傳。
- 創意圓角產生器 免費線上創意圓角產生器。拖曳 8 個控制點或選擇 blob 預設，快速建立有機 CSS 形狀並複製 border-radius 程式碼。
- 顏色轉換器 免費線上顏色轉換器。即時轉換 HEX、RGB、HSL、HSV 格式，附視覺化拾色器。100% 隱私保護，瀏覽器本地運行。
- CSS 緩動函數產生器 免費線上 CSS 緩動產生器。在互動曲線上拖曳 cubic-bezier 控制點，內建 18 種預設，小球循環動畫即時對比，一鍵複製 timing function。
- CSS 文字陰影產生器 免費線上 CSS text-shadow 產生器。多層陰影可調偏移、模糊、顏色與透明度，內建霓虹、3D、復古、光暈等預設，即時預覽並一鍵複製程式碼。
- CSS clip-path 裁剪產生器 免費線上 CSS clip-path 產生器。支援 polygon、circle、ellipse、inset 四種模式，頂點可拖曳，即時預覽並一鍵複製 CSS 程式碼。