偶爾會看到帶有波浪形狀的網頁背景設計，通常會配合平面化設計風格一起使用，會讓整體看起來更活潑。倒是從沒想過這個效果是怎么做的，沒想到現在通過 svg 矢量圖代碼就可直接帶入，讓整個設計流程加速不少。如果你平常工作和網頁設計有關，可能會用到類似下方圖片顯示的「波浪圖」效果，本文要介紹的生成器會很有用，趕緊把它收藏到書簽以備不時之需。

「Get Waves」是一個生成 svg 格式波浪圖案的線上工具，直接打開網站就能線上制作。提供一些基本選項，包括波浪類型、位置、顏色、透明度、密度等等，調整后會立即在網頁中產生效果預覽，最終可以將圖片另存為 svg 矢量圖或產生 svg 代碼。

Get Waves

網站鏈接：https://getwaves.io/

打開 Get Waves 后預設就會有一個藍色波浪效果，看起來非常夏天。試著點選控制列的調整項目，通過簡單的圖示應該可以知道每個選項代表的意思，隨意點選看看，下方預覽圖就會即時更新。

Get Waves 讓使用者直接從網頁上調整波浪樣式、顯示位置（上或下）、顏色、透明度和密集程度等選項。如果沒有想法，點選最右側的「骰子」圖示就是隨機生成，跟以前玩游戲在創角色隨機獲得的屬性一樣。

最后，點選中間的下載圖案，選擇要下載 svg 矢量圖格式或直接復制上方 svg 代碼。

值得一試的三個理由：

• 可線上產生波浪圖；
• 調整波浪樣式、位置、顏色、透明度和密集程度；
• 可生成 svg 矢量圖或直接復制 svg 代碼。