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

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

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

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

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

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

使用教學

STEP 1

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

SVG Waves

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

SVG Waves

STEP 2

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

SVG Waves

STEP 3

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

SVG Waves

STEP 4

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

SVG Waves

值得一試的三個理由:

  1. SVG Waves 免費的 SVG 波浪圖產生器,以拖拉方式設計波浪
  2. 自訂顏色、背景色、波浪樣式和波峰高度數量
  3. 匯出 SVG 和 CSS 原始碼
分享到...