SVG Wave Generator

Generate customizable SVG wave dividers — sine, triangle, and step waves for website sections.

Wave type

Amplitude: 40px

Frequency: 2

Height: 120px

Fill color

Flip waveFlip vertically

SVG code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
  <rect width="1200" height="120" fill="none"/>
  <path d="M0.0,60.0 L6.0,57.5 L12.0,55.0 L18.0,52.5 L24.0,50.1 L30.0,47.6 L36.0,45.3 L42.0,43.0 L48.0,40.7 L54.0,38.6 L60.0,36.5 L66.0,34.5 L72.0,32.6 L78.0,30.8 L84.0,29.2 L90.0,27.6 L96.0,26.2 L102.0,24.9 L108.0,23.8 L114.0,22.8 L120.0,22.0 L126.0,21.3 L132.0,20.7 L138.0,20.3 L144.0,20.1 L150.0,20.0 L156.0,20.1 L162.0,20.3 L168.0,20.7 L174.0,21.3 L180.0,22.0 L186.0,22.8 L192.0,23.8 L198.0,24.9 L204.0,26.2 L210.0,27.6 L216.0,29.2 L222.0,30.8 L228.0,32.6 L234.0,34.5 L240.0,36.5 L246.0,38.6 L252.0,40.7 L258.0,43.0 L264.0,45.3 L270.0,47.6 L276.0,50.1 L282.0,52.5 L288.0,55.0 L294.0,57.5 L300.0,60.0 L306.0,62.5 L312.0,65.0 L318.0,67.5 L324.0,69.9 L330.0,72.4 L336.0,74.7 L342.0,77.0 L348.0,79.3 L354.0,81.4 L360.0,83.5 L366.0,85.5 L372.0,87.4 L378.0,89.2 L384.0,90.8 L390.0,92.4 L396.0,93.8 L402.0,95.1 L408.0,96.2 L414.0,97.2 L420.0,98.0 L426.0,98.7 L432.0,99.3 L438.0,99.7 L444.0,99.9 L450.0,100.0 L456.0,99.9 L462.0,99.7 L468.0,99.3 L474.0,98.7 L480.0,98.0 L486.0,97.2 L492.0,96.2 L498.0,95.1 L504.0,93.8 L510.0,92.4 L516.0,90.8 L522.0,89.2 L528.0,87.4 L534.0,85.5 L540.0,83.5 L546.0,81.4 L552.0,79.3 L558.0,77.0 L564.0,74.7 L570.0,72.4 L576.0,69.9 L582.0,67.5 L588.0,65.0 L594.0,62.5 L600.0,60.0 L606.0,57.5 L612.0,55.0 L618.0,52.5 L624.0,50.1 L630.0,47.6 L636.0,45.3 L642.0,43.0 L648.0,40.7 L654.0,38.6 L660.0,36.5 L666.0,34.5 L672.0,32.6 L678.0,30.8 L684.0,29.2 L690.0,27.6 L696.0,26.2 L702.0,24.9 L708.0,23.8 L714.0,22.8 L720.0,22.0 L726.0,21.3 L732.0,20.7 L738.0,20.3 L744.0,20.1 L750.0,20.0 L756.0,20.1 L762.0,20.3 L768.0,20.7 L774.0,21.3 L780.0,22.0 L786.0,22.8 L792.0,23.8 L798.0,24.9 L804.0,26.2 L810.0,27.6 L816.0,29.2 L822.0,30.8 L828.0,32.6 L834.0,34.5 L840.0,36.5 L846.0,38.6 L852.0,40.7 L858.0,43.0 L864.0,45.3 L870.0,47.6 L876.0,50.1 L882.0,52.5 L888.0,55.0 L894.0,57.5 L900.0,60.0 L906.0,62.5 L912.0,65.0 L918.0,67.5 L924.0,69.9 L930.0,72.4 L936.0,74.7 L942.0,77.0 L948.0,79.3 L954.0,81.4 L960.0,83.5 L966.0,85.5 L972.0,87.4 L978.0,89.2 L984.0,90.8 L990.0,92.4 L996.0,93.8 L1002.0,95.1 L1008.0,96.2 L1014.0,97.2 L1020.0,98.0 L1026.0,98.7 L1032.0,99.3 L1038.0,99.7 L1044.0,99.9 L1050.0,100.0 L1056.0,99.9 L1062.0,99.7 L1068.0,99.3 L1074.0,98.7 L1080.0,98.0 L1086.0,97.2 L1092.0,96.2 L1098.0,95.1 L1104.0,93.8 L1110.0,92.4 L1116.0,90.8 L1122.0,89.2 L1128.0,87.4 L1134.0,85.5 L1140.0,83.5 L1146.0,81.4 L1152.0,79.3 L1158.0,77.0 L1164.0,74.7 L1170.0,72.4 L1176.0,69.9 L1182.0,67.5 L1188.0,65.0 L1194.0,62.5 L1200.0,60.0 L1200,120 L0,120 Z" fill="#6366f1"/>
</svg>

How to use SVG wave dividers

SVG waves are a popular way to create smooth section transitions on websites. Because SVG uses vector math, the wave scales perfectly to any screen width when preserveAspectRatio="none" is set. Set width: 100% and the desired height in CSS, and the SVG fills the container without pixelation.

Place the SVG directly in your HTML at the border between two sections, adjusting the fill color to match the lower section. For more SVG tools see SVG to PNG and SVG to Data URI.

Private & free — this tool runs entirely in your browser.