SVG Wave Generator

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

Type: SINEAmplitude: 40pxFrequency: 2Height: 120pxPath Points: 203SVG Size: 2622 chars

Presets & Styles

Wave Type

Amplitude: 40px

Frequency: 2

Height: 120px

Fill Color

Flip 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.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a wave divider between two page sections.
Getting a decorative shape that scales with the container.
Comparing sine, triangle and step waves for one design.
Producing an SVG divider rather than a raster image.
Building a divider whose colour comes from a variable.

Frequently Asked Questions

How is a wave shape actually made?: From a path built out of cubic or quadratic Bézier curves, closed along the edges to form a filled shape. The control points determine the amplitude and where the crests fall.
How do I make it span any width?: With a `viewBox` and `preserveAspectRatio` set so the shape stretches — commonly `none` for a divider, which lets it distort horizontally while keeping the height you set.
Should it be an inline SVG or a background image?: Inline when it needs to respond to CSS or theming, since a background image is an opaque document. A background is simpler and cacheable when the wave is purely decorative and fixed.
Is it accessible?: It is decorative, so mark it `aria-hidden="true"` and give it no title. Leaving a decorative SVG exposed adds a meaningless announcement for screen reader users.
How do I stop a seam appearing between sections?: Overlap the wave slightly with the block below and match the fill to that block's background. Sub-pixel rounding at some zoom levels is what produces the hairline gap.

Common errors and gotchas

Omitting a viewBox, which stops the wave scaling with its container.
Leaving a decorative divider without `aria-hidden`, so it is announced by a screen reader.
Assuming the wave holds its proportions at every width, which depends on the preserve-aspect-ratio setting.
Producing a very complex path where a simpler one compresses far smaller.
Layering waves whose colours do not match the sections they divide, which reads as a gap.