Svg Wave 線上製作波浪背景圖,調整波峰數或高度產生 SVG、PNG 格式

Svg Wave 線上製作波浪背景圖,調整波峰數或高度產生 SVG、PNG 格式

對於一般內容網站來說,為了使頁面內容有好的可讀性,可能會維持網頁底色為白色或單一顏色,但如果是網路服務或應用程式,想讓背景活潑也能加入變化,例如 Hero PatternsBackground Image GeneratorSVG Backgrounds 產生紋理材質背景,既不會太過混雜又不像單一顏色這麼無趣,在維持網頁效能的情況下只要透過 SVG 或產生小張 PNG 圖片,以 CSS 方式載入就能自訂背景。

本文要介紹的「Svg Wave」是一個免費背景產生器,可以快速製作波浪背景,和之前推薦過的 Get Waves 大同小異,Svg Wave 能調整波浪的波峰數量、波浪層數和高度,也有自訂顏色或是使用漸層色效果,具有非常高的可自訂性。

如果你不確定怎麼做比較好看,隨機按鈕點一下就會立即產生某個樣式,在 Svg Wave 能將波浪圖輸出為 SVG 或 PNG 格式(SVG 直接給出原始碼),若你覺得開發網頁時使用單色背景看起來太過單調,Svg Wave 是個不錯的選擇。

Svg Wave
https://svgwave.in/

使用教學

STEP 1

開啟 Svg Wave 網站後會看到波浪背景範例,從「Color」選取顏色或「Gradient」以兩個顏色產生漸層色效果,Svg Wave 可即時預覽顏色。

Svg Wave

漸層色是蠻有活力的選項,選擇兩個顏色就能產生漸變效果。

Svg Wave

STEP 2

上方的 Waves、Layers 分別代表波浪的數量和層數,直接以拖曳方式調整就會即時呈現在網頁上,調整 Height 可選擇不同的浪高,看起來整體感覺又會不太一樣。

Svg Wave

STEP 3

如果想知道在深色背景呈現效果,點選 Svg Wave 右上角的圖示可切換深色模式。

Svg Wave

最後,點選右下角「Export」選擇要匯出為 SVG 或 PNG 格式,如果是 SVG 會直接給出原始碼。

Svg Wave

值得一試的三個理由:

  1. 可線上製作波浪圖網頁背景圖片
  2. 自訂波峰數量、波浪層數和高度並即時預覽
  3. 產生 SVG 或 PNG 圖片格式
分享到...