波浪 SVG 產生器
調整波浪的尺寸、形狀和顏色,以建立網頁分隔線或背景。複製或儲存 SVG 或背景 CSS,也可以儲存 PNG 圖像。
可執行的操作
調整形狀和顏色
調整波浪高度、數量、位置和填色方向,並使用一種或兩種顏色建立圖像。
以符合需求的格式取得結果
複製並儲存 SVG 程式碼或 CSS 背景,或儲存為 PNG 圖像。
使用方法
選擇起始形狀
直接調整數值,或從「選擇範本」挑選相似形狀。
調整尺寸和顏色
指定寬度、高度、振幅和波浪數量。在進階設定中調整起始位置和中心高度。
產生並確認 SVG
確認產生的波浪形狀和透明區域。變更設定後請重新產生。
取得所需格式
選擇要複製或儲存的 SVG 或 CSS 背景,也可以儲存 PNG。
適用情境
分隔頁面區塊
在內容區塊之間或頁尾上方建立波浪形分隔線。
配合網站配色
使用純色或漸層建立符合頁面配色的背景素材。
波浪形狀和儲存格式
振幅和波浪數量
振幅是垂直變化的幅度,波浪數量則是整個寬度中的週期數。此功能無法顯示音訊波形。
波浪位置和裁切區域
使用相位變更起始位置,使用中心高度變更垂直位置。影像外的部分會被裁切。
選擇 SVG 或 PNG
SVG 以向量表示形狀。PNG 則以指定的像素尺寸儲存圖像,並保留透明區域。
如何放置 CSS 背景
CSS 會指定背景圖像。請設定使用元素的寬度和高度,提供背景顯示區域。
常見問題
可以調整波浪形狀和顏色嗎?
可以指定數值和顏色。選擇「使用兩種顏色」可設定第二種顏色和漸層角度。
選取範本時,目前設定會怎樣?
選擇範本時,寬度、高度和顏色等設定都會被範本設定取代。選取後請調整所需數值。
變更設定時,預覽會更新嗎?
變更設定後,請選擇「產生 SVG」以查看結果。舊的產生結果將無法再顯示或儲存。
SVG 是精確的正弦波嗎?
波浪會以平滑的三次曲線近似呈現,不是用於數學測量或音訊分析的波形。
檔案處理
- 輸入
- 依波浪數值設定和顏色建立,不需選擇影像。
- 輸出
- wave.svg、wave.css 和 wave.png。也可複製 SVG 和 CSS。