設計 / SVG

用於區段分隔線的SVG波浪產生器

產生平滑、分層的SVG波浪，放在兩個頁面區段之間：選擇圖層數量、波浪數量、高度、平滑度和顏色，然後下載SVG或複製為CSS背景。

用於區段分隔線的SVG波浪產生器: 每個圖層都是一列點，按照隨機幅度交替位於基準線上方和下方，再以平滑曲線連接，並填滿至底部邊緣。後方圖層的顏色較淡，因此能呈現深度感。SVG會延展至任何寬度，CSS版本則將其嵌入為data URI背景。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。

分類
開發者工具
使用次數
在瀏覽器中
費用
免費・免註冊
可用狀態
可立即使用
SVG波浪產生器本機處理

全程在瀏覽器中執行

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

SVG會延展至任何寬度（preserveAspectRatio="none"），因此適合用作全寬區段分隔線。請將它放在某個區段的底部，並使用下一個區段的背景顏色；也可以翻轉後放在頂部。相同的隨機種子一律會繪製出相同的波浪。

SVG還是CSS？

內嵌SVG可以透過CSS設定樣式與製作動畫，填色也能使用currentColor。做為CSS背景時，SVG會是資料URI：不需要載入額外內容，但顏色會固定在程式碼中。無論採用哪種方式，檔案都只有幾百個位元組；還可以使用SVG清理工具進一步整理。

平滑度

這條曲線是由Catmull-Rom樣條曲線轉換成三次貝茲線段：平滑度達到最高時，曲線會柔和地通過每個點；設為零時，點與點之間會變成直線，形成鋸齒狀的山脈邊緣。

使用方式

  1. 設定圖層數量、波浪數量及其高度。
  2. 選擇顏色，並翻轉波浪以放在區段頂端。
  3. 點擊產生新的隨機波浪，然後下載SVG或複製CSS。

隱私與限制

波浪在您的瀏覽器中繪製。

相關工具

SVG blobCSS圖樣CSS漸層

常見問題

如何在兩個區段之間使用？

將波浪設為下方區段的顏色，並以全寬度放在上方區段的底部；若要放在區段頂端，請先將波浪翻轉。

使用相同設定會產生相同的波浪嗎？

會：形狀來自隨機種子，因此只有在您點擊產生新波浪時才會變更。

可以將這些波浪用於商業用途嗎？

可以：這些形狀是為您產生的，不受任何授權限制。

免費工具・使用在瀏覽器中次・免註冊