SVG Waves 免費波浪圖產生器，互動式介面即時產生圖案原始碼

這幾年看過一些波浪狀、具有弧度的圖形設計，可能運用在網頁、應用程式或文件，這些圖案可以利用產生器製作，像是之前介紹過的 Get Waves、Svg Wave 都能在瀏覽器上建立出符合自己需求的波浪圖，無論波浪類型、波峰數量、層數、高度、顏色密度等等，有些還能搭配上漸層色效果，如果要尋找波浪圖的話就不需以繪圖軟體自行繪製，類似產生器很多，能打造出相當個人化的圖形。

本文要介紹的「SVG Waves」是一個免費的 SVG 波浪圖產生器，來自一位加拿大 12 歲年輕開發者，互動式的操作界面讓使用者以拖拉方式設計波浪，為波浪自訂顏色、背景色或選擇喜愛的波浪樣式。

SVG Waves 有好幾個可自訂選項，像是調整左右波峰高度、前景色、背景色、曲線的曲度，調整時會即時反應在網頁上，點選匯出 SVG 格式的程式碼，包括 SVG、CSS 原始碼和反向或翻轉選項，就能快速將圖案導入你的網頁或文件中。

SVG Waves
https://www.svgwaves.io/

使用教學

STEP 1

開啟 SVG Waves 網站後，波浪中間有個編號 1 的按鈕，點選調整可拖曳出波浪的形狀和曲度，當然你也可以維持預設值。

如果你想要增加更多波峰，點選右側「+」加入更多數字，就能以相同方式調整。

STEP 2

下方的設定選項左右顏色調整前景和背景色。

STEP 3

左右兩條設定軸調整波峰高度，中間選項選擇波浪曲線或是直線樣式，可調整曲度。

STEP 4

點選下方按鈕會出現「Export Wave」畫面，將 SVG 原始碼、CSS 原始碼分別複製就能呈現出你在網頁裡設定的波浪效果。最底下還有選項可以將波浪進行反向或翻轉。