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

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

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

SVG Waves

網(wǎng)站鏈接：https://www.svgwaves.io/

使用教學(xué)

開啟 SVG Waves 網(wǎng)站后，波浪中間有個編號 1 的按鈕，點選調(diào)整可拖曳出波浪的形狀和曲度，當(dāng)然你也可以維持默認(rèn)值。

如果你想要增加更多波峰，點選右側(cè)「+」加入更多數(shù)字，就能以相同方式調(diào)整。

下方的設(shè)定選項左右顏色調(diào)整前景和背景色。

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

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

值得一試的三個理由：

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