這位12歲少年開發的免費網站，能幫你快速生成波浪形背景！

這幾年看過一些波浪狀、具有弧度的圖形設計，可能運用于網頁、應用程序等，這些圖案可以利用生成器制作，像是之前介紹過的 Svg Wave 能在瀏覽器上建立出符合自己需求的波浪圖，包括波浪類型、波峰數量、層數、高度、顏色密度等等，有些還能搭配上漸變色效果，如果要尋找波浪圖的話就不需以繪圖軟件自行繪制：

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

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

SVG Waves

網站鏈接：https://www.svgwaves.io/

使用教學

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

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

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

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

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

值得一試的三個理由：

• SVG Waves 免費的 SVG 波浪圖產生器，以拖拽方式設計波浪
• 自定義顏色、背景色、波浪樣式和波峰高度數量
• 輸出 SVG 和 CSS 原始碼