Dev Tools

SVG Wave Generator

Generate customizable SVG wave dividers with amplitude, frequency, layers, and color.

Preview
Settings
Color
Amplitude40px
Frequency3
Layers1
Height150px
SVG Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 150" preserveAspectRatio="none">
  <g>
  <path d="M0.0,75.0 L12.0,82.5 L24.0,89.7 L36.0,96.4 L48.0,102.4 L60.0,107.4 L72.0,111.2 L84.0,113.7 L96.0,114.9 L108.0,114.7 L120.0,113.0 L132.0,110.1 L144.0,105.8 L156.0,100.5 L168.0,94.3 L180.0,87.4 L192.0,80.0 L204.0,72.5 L216.0,65.1 L228.0,58.0 L240.0,51.5 L252.0,45.8 L264.0,41.2 L276.0,37.8 L288.0,35.7 L300.0,35.0 L312.0,35.7 L324.0,37.8 L336.0,41.2 L348.0,45.8 L360.0,51.5 L372.0,58.0 L384.0,65.1 L396.0,72.5 L408.0,80.0 L420.0,87.4 L432.0,94.3 L444.0,100.5 L456.0,105.8 L468.0,110.1 L480.0,113.0 L492.0,114.7 L504.0,114.9 L516.0,113.7 L528.0,111.2 L540.0,107.4 L552.0,102.4 L564.0,96.4 L576.0,89.7 L588.0,82.5 L600.0,75.0 L612.0,67.5 L624.0,60.3 L636.0,53.6 L648.0,47.6 L660.0,42.6 L672.0,38.8 L684.0,36.3 L696.0,35.1 L708.0,35.3 L720.0,37.0 L732.0,39.9 L744.0,44.2 L756.0,49.5 L768.0,55.7 L780.0,62.6 L792.0,70.0 L804.0,77.5 L816.0,84.9 L828.0,92.0 L840.0,98.5 L852.0,104.2 L864.0,108.8 L876.0,112.2 L888.0,114.3 L900.0,115.0 L912.0,114.3 L924.0,112.2 L936.0,108.8 L948.0,104.2 L960.0,98.5 L972.0,92.0 L984.0,84.9 L996.0,77.5 L1008.0,70.0 L1020.0,62.6 L1032.0,55.7 L1044.0,49.5 L1056.0,44.2 L1068.0,39.9 L1080.0,37.0 L1092.0,35.3 L1104.0,35.1 L1116.0,36.3 L1128.0,38.8 L1140.0,42.6 L1152.0,47.6 L1164.0,53.6 L1176.0,60.3 L1188.0,67.5 L1200.0,75.0 L1200,150 L0,150 Z" fill="rgba(59, 130, 246, 1.00)" />
  </g>
</svg>
CSS Snippet
.wave-divider {
  width: 100%;
  height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20150%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cg%3E%0A%20%20%3Cpath%20d%3D%22M0.0%2C75.0%20L12.0%2C82.5%20L24.0%2C89.7%20L36.0%2C96.4%20L48.0%2C102.4%20L60.0%2C107.4%20L72.0%2C111.2%20L84.0%2C113.7%20L96.0%2C114.9%20L108.0%2C114.7%20L120.0%2C113.0%20L132.0%2C110.1%20L144.0%2C105.8%20L156.0%2C100.5%20L168.0%2C94.3%20L180.0%2C87.4%20L192.0%2C80.0%20L204.0%2C72.5%20L216.0%2C65.1%20L228.0%2C58.0%20L240.0%2C51.5%20L252.0%2C45.8%20L264.0%2C41.2%20L276.0%2C37.8%20L288.0%2C35.7%20L300.0%2C35.0%20L312.0%2C35.7%20L324.0%2C37.8%20L336.0%2C41.2%20L348.0%2C45.8%20L360.0%2C51.5%20L372.0%2C58.0%20L384.0%2C65.1%20L396.0%2C72.5%20L408.0%2C80.0%20L420.0%2C87.4%20L432.0%2C94.3%20L444.0%2C100.5%20L456.0%2C105.8%20L468.0%2C110.1%20L480.0%2C113.0%20L492.0%2C114.7%20L504.0%2C114.9%20L516.0%2C113.7%20L528.0%2C111.2%20L540.0%2C107.4%20L552.0%2C102.4%20L564.0%2C96.4%20L576.0%2C89.7%20L588.0%2C82.5%20L600.0%2C75.0%20L612.0%2C67.5%20L624.0%2C60.3%20L636.0%2C53.6%20L648.0%2C47.6%20L660.0%2C42.6%20L672.0%2C38.8%20L684.0%2C36.3%20L696.0%2C35.1%20L708.0%2C35.3%20L720.0%2C37.0%20L732.0%2C39.9%20L744.0%2C44.2%20L756.0%2C49.5%20L768.0%2C55.7%20L780.0%2C62.6%20L792.0%2C70.0%20L804.0%2C77.5%20L816.0%2C84.9%20L828.0%2C92.0%20L840.0%2C98.5%20L852.0%2C104.2%20L864.0%2C108.8%20L876.0%2C112.2%20L888.0%2C114.3%20L900.0%2C115.0%20L912.0%2C114.3%20L924.0%2C112.2%20L936.0%2C108.8%20L948.0%2C104.2%20L960.0%2C98.5%20L972.0%2C92.0%20L984.0%2C84.9%20L996.0%2C77.5%20L1008.0%2C70.0%20L1020.0%2C62.6%20L1032.0%2C55.7%20L1044.0%2C49.5%20L1056.0%2C44.2%20L1068.0%2C39.9%20L1080.0%2C37.0%20L1092.0%2C35.3%20L1104.0%2C35.1%20L1116.0%2C36.3%20L1128.0%2C38.8%20L1140.0%2C42.6%20L1152.0%2C47.6%20L1164.0%2C53.6%20L1176.0%2C60.3%20L1188.0%2C67.5%20L1200.0%2C75.0%20L1200%2C150%20L0%2C150%20Z%22%20fill%3D%22rgba(59%2C%20130%2C%20246%2C%201.00)%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
Was this page helpful?

Related tools