SVG wave divider generator
Wavy section dividers: height, harmonics, randomness, up to three layers, flip and direction. Download SVG or copy React. Free, no sign up, runs in the browser.
Section one
Section two
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 140" width="100%" height="140" preserveAspectRatio="none" aria-hidden="true">
<path d="M0 67 L10 63.2 L20 59.4 L30 55.7 L40 52.2 L50 48.8 L60 45.6 L70 42.6 L80 39.8 L90 37.2 L100 34.8 L110 32.7 L120 30.8 L130 29.2 L140 27.8 L150 26.6 L160 25.7 L170 25 L180 24.5 L190 24.2 L200 24 L210 24.1 L220 24.2 L230 24.5 L240 24.9 L250 25.3 L260 25.8 L270 26.4 L280 26.9 L290 27.5 L300 28 L310 28.5 L320 29 L330 29.3 L340 29.6 L350 29.8 L360 30 L370 30 L380 29.9 L390 29.7 L400 29.4 L410 29 L420 28.5 L430 27.9 L440 27.2 L450 26.5 L460 25.7 L470 24.9 L480 24 L490 23.1 L500 22.3 L510 21.4 L520 20.6 L530 19.8 L540 19.1 L550 18.5 L560 17.9 L570 17.5 L580 17.2 L590 17 L600 16.9 L610 17 L620 17.2 L630 17.5 L640 18 L650 18.7 L660 19.4 L670 20.4 L680 21.4 L690 22.6 L700 23.9 L710 25.4 L720 26.9 L730 28.5 L740 30.3 L750 32.1 L760 34 L770 35.9 L780 37.9 L790 39.9 L800 41.9 L810 44 L820 46.1 L830 48.2 L840 50.2 L850 52.3 L860 54.4 L870 56.4 L880 58.5 L890 60.5 L900 62.4 L910 64.4 L920 66.3 L930 68.2 L940 70.1 L950 72 L960 73.8 L970 75.6 L980 77.4 L990 79.2 L1000 80.9 L1010 82.7 L1020 84.4 L1030 86.1 L1040 87.7 L1050 89.3 L1060 90.9 L1070 92.4 L1080 93.9 L1090 95.3 L1100 96.6 L1110 97.8 L1120 99 L1130 100 L1140 101 L1150 101.8 L1160 102.4 L1170 102.9 L1180 103.2 L1190 103.4 L1200 103.3 L1210 103.1 L1220 102.6 L1230 101.9 L1240 101 L1250 99.9 L1260 98.5 L1270 96.9 L1280 95 L1290 92.9 L1300 90.6 L1310 88 L1320 85.3 L1330 82.3 L1340 79.2 L1350 75.9 L1360 72.4 L1370 68.8 L1380 65.1 L1390 61.4 L1400 57.5 L1410 53.6 L1420 49.8 L1430 45.9 L1440 42.1 L1440 140 L0 140 Z" fill="#F6F5FB" fill-opacity="0.5"/>
<path d="M0 127.4 L10 125.8 L20 123.8 L30 121.7 L40 119.4 L50 116.9 L60 114.3 L70 111.5 L80 108.7 L90 105.9 L100 103 L110 100.1 L120 97.2 L130 94.4 L140 91.7 L150 89.1 L160 86.6 L170 84.3 L180 82.1 L190 80 L200 78.1 L210 76.4 L220 74.9 L230 73.6 L240 72.4 L250 71.4 L260 70.5 L270 69.8 L280 69.3 L290 68.9 L300 68.5 L310 68.3 L320 68.2 L330 68.1 L340 68 L350 68 L360 68 L370 67.9 L380 67.9 L390 67.8 L400 67.6 L410 67.4 L420 67 L430 66.6 L440 66.1 L450 65.4 L460 64.7 L470 63.8 L480 62.9 L490 61.8 L500 60.6 L510 59.3 L520 57.9 L530 56.4 L540 54.9 L550 53.3 L560 51.6 L570 49.9 L580 48.2 L590 46.5 L600 44.7 L610 43 L620 41.4 L630 39.8 L640 38.2 L650 36.8 L660 35.4 L670 34.1 L680 33 L690 31.9 L700 31 L710 30.2 L720 29.5 L730 29 L740 28.6 L750 28.4 L760 28.3 L770 28.3 L780 28.4 L790 28.7 L800 29.1 L810 29.6 L820 30.2 L830 31 L840 31.8 L850 32.7 L860 33.7 L870 34.8 L880 35.9 L890 37.1 L900 38.4 L910 39.8 L920 41.2 L930 42.6 L940 44.2 L950 45.7 L960 47.4 L970 49 L980 50.8 L990 52.6 L1000 54.4 L1010 56.4 L1020 58.3 L1030 60.4 L1040 62.5 L1050 64.7 L1060 67 L1070 69.3 L1080 71.7 L1090 74.2 L1100 76.8 L1110 79.4 L1120 82.1 L1130 84.8 L1140 87.6 L1150 90.4 L1160 93.2 L1170 96.1 L1180 98.9 L1190 101.8 L1200 104.6 L1210 107.3 L1220 110 L1230 112.6 L1240 115.1 L1250 117.5 L1260 119.7 L1270 121.7 L1280 123.6 L1290 125.3 L1300 126.7 L1310 127.9 L1320 128.9 L1330 129.6 L1340 130.1 L1350 130.2 L1360 130.1 L1370 129.6 L1380 128.9 L1390 127.9 L1400 126.5 L1410 124.9 L1420 123.1 L1430 120.9 L1440 118.5 L1440 140 L0 140 Z" fill="#F6F5FB"/>
</svg>
How to use it
- 1Set the height and how many harmonics the wave should have, then add randomness or shuffle the seed.
- 2Choose whether the fill reaches the bottom or the top, and flip it if the shape reads better mirrored.
- 3Add a second or third layer for depth and pick the wave color to match the next section.
- 4Download the SVG, copy the React component or the CSS background version.
How the wave is built
Each wave is a sum of sine waves. The first harmonic makes one slow swell across the width, each extra harmonic adds a faster, weaker ripple, and the randomness setting lets a seeded generator vary the frequencies, amplitudes and phases. The sum is normalised so the tallest peak uses the height you chose, then sampled at 144 points into a path and closed along the top or bottom edge. Straight segments that short look perfectly smooth, and the file stays around two kilobytes per layer.
Placing it between two sections
The SVG has a 1440 unit wide viewBox and preserveAspectRatio="none", so it stretches to any width while keeping the height you set. Put it between the sections, or absolutely position it at the bottom of the first one, and fill it with the background color of the section it reaches toward. With the React component the fill is currentColor, so a text-* class or a color style sets it. The CSS tab gives the same wave as a data URI background for cases where you cannot add markup. The output marks the SVG aria-hidden, since it is decoration and screen readers should not announce an image between sections.
<section className="bg-ink text-on-ink">...</section>
<WaveDivider className="-mt-px block w-full text-bg" />
<section className="bg-bg">...</section>
Layers, flip and direction
Extra layers are the same wave shifted in phase, pushed toward the opposite section and drawn at 50 and 25 percent opacity behind the solid one. Because they share the fill color, they read as depth rather than as separate shapes. Flip mirrors the wave left to right, which helps when a peak lands under a heading. Direction decides which edge the fill reaches: bottom sits on top of the section below, top hangs down from the one above.
Frequently asked questions
Why does the wave look stretched on wide screens?
Because preserveAspectRatio is none: the shape fills any width at a fixed height. If you prefer a constant curve, remove that attribute and let the height scale with the width.
How do I match the wave color to my section?
Fill it with the background color of the section it reaches toward. In the React version set a text color class, since the paths use currentColor.
Can I animate the wave?
Yes, with a CSS transform. Place two copies side by side and translate them, or slide the background position of the CSS version. Stop the animation under prefers-reduced-motion.