Toollet
依想做的事或應用程式名稱搜尋搜尋聯絡我們
價格

波浪 SVG 產生器

調整波浪的尺寸、形狀和顏色,以建立網頁分隔線或背景。複製或儲存 SVG 或背景 CSS,也可以儲存 PNG 圖像。

選擇預設範本

選取預設範本會取代包含寬度、高度和顏色在內的設定。

振幅表示垂直變化量;波浪數量表示整個寬度中可容納的週期數。

進階設定相位0°・中心50%

使用 0–360 度的相位移動起始位置。中心高度為 0% 時在上緣,100% 時在下緣。

超出影像範圍的波浪部分會被裁切。

可執行的操作

調整形狀和顏色

調整波浪高度、數量、位置和填色方向,並使用一種或兩種顏色建立圖像。

以符合需求的格式取得結果

複製並儲存 SVG 程式碼或 CSS 背景,或儲存為 PNG 圖像。

使用方法

  1. 選擇起始形狀

    直接調整數值,或從「選擇範本」挑選相似形狀。

  2. 調整尺寸和顏色

    指定寬度、高度、振幅和波浪數量。在進階設定中調整起始位置和中心高度。

  3. 產生並確認 SVG

    確認產生的波浪形狀和透明區域。變更設定後請重新產生。

  4. 取得所需格式

    選擇要複製或儲存的 SVG 或 CSS 背景,也可以儲存 PNG。

適用情境

分隔頁面區塊

在內容區塊之間或頁尾上方建立波浪形分隔線。

配合網站配色

使用純色或漸層建立符合頁面配色的背景素材。

波浪形狀和儲存格式

振幅和波浪數量

振幅是垂直變化的幅度,波浪數量則是整個寬度中的週期數。此功能無法顯示音訊波形。

波浪位置和裁切區域

使用相位變更起始位置,使用中心高度變更垂直位置。影像外的部分會被裁切。

選擇 SVG 或 PNG

SVG 以向量表示形狀。PNG 則以指定的像素尺寸儲存圖像,並保留透明區域。

如何放置 CSS 背景

CSS 會指定背景圖像。請設定使用元素的寬度和高度,提供背景顯示區域。

常見問題

可以調整波浪形狀和顏色嗎?

可以指定數值和顏色。選擇「使用兩種顏色」可設定第二種顏色和漸層角度。

選取範本時,目前設定會怎樣?

選擇範本時,寬度、高度和顏色等設定都會被範本設定取代。選取後請調整所需數值。

變更設定時,預覽會更新嗎?

變更設定後,請選擇「產生 SVG」以查看結果。舊的產生結果將無法再顯示或儲存。

SVG 是精確的正弦波嗎?

波浪會以平滑的三次曲線近似呈現,不是用於數學測量或音訊分析的波形。

檔案處理

輸入
依波浪數值設定和顏色建立,不需選擇影像。
輸出
wave.svg、wave.css 和 wave.png。也可複製 SVG 和 CSS。

目前設定

搜尋工具