SVG Wave Generator

Create section dividers with smooth waves, steps, peaks or bumps. Adjust height, amplitude, wave count and phase, using one or two layers. Export a filled shape or an open wave line as SVG, copy its CSS or Tailwind classes, or download a PNG. Everything is generated in your browser.

Local-only

Presets

Pick a preset to set every control at once, then adjust from there.

Wave style

Height120pxAmplitude46%Frequency2Phase18%

Background color

Wave color

Layers

Thickness6pxSolid fillFlip horizontally

A preset sets every slider in one click; Shuffle does the same with random values.

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" width="1440" height="120" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M0 148.760L11.250 149.537L22.500 150.030L33.750 150.234L45.000 150.147L56.250 149.769L67.500 149.105L78.750 148.160L90.000 146.944L101.250 145.469L112.500 143.748L123.750 141.799L135.000 139.639L146.250 137.291L157.500 134.776L168.750 132.119L180.000 129.345L191.250 126.481L202.500 123.554L213.750 120.594L225.000 117.627L236.250 114.684L247.500 111.792L258.750 108.978L270.000 106.271L281.250 103.696L292.500 101.279L303.750 99.041L315.000 97.005L326.250 95.191L337.500 93.616L348.750 92.294L360.000 91.240L371.250 90.463L382.500 89.970L393.750 89.766L405.000 89.853L416.250 90.231L427.500 90.895L438.750 91.840L450.000 93.056L461.250 94.531L472.500 96.252L483.750 98.201L495.000 100.361L506.250 102.709L517.500 105.224L528.750 107.881L540.000 110.655L551.250 113.519L562.500 116.446L573.750 119.406L585.000 122.373L596.250 125.316L607.500 128.208L618.750 131.022L630.000 133.729L641.250 136.304L652.500 138.721L663.750 140.959L675.000 142.995L686.250 144.809L697.500 146.384L708.750 147.706L720.000 148.760L731.250 149.537L742.500 150.030L753.750 150.234L765.000 150.147L776.250 149.769L787.500 149.105L798.750 148.160L810.000 146.944L821.250 145.469L832.500 143.748L843.750 141.799L855.000 139.639L866.250 137.291L877.500 134.776L888.750 132.119L900.000 129.345L911.250 126.481L922.500 123.554L933.750 120.594L945.000 117.627L956.250 114.684L967.500 111.792L978.750 108.978L990.000 106.271L1001.250 103.696L1012.500 101.279L1023.750 99.041L1035.000 97.005L1046.250 95.191L1057.500 93.616L1068.750 92.294L1080.000 91.240L1091.250 90.463L1102.500 89.970L1113.750 89.766L1125.000 89.853L1136.250 90.231L1147.500 90.895L1158.750 91.840L1170.000 93.056L1181.250 94.531L1192.500 96.252L1203.750 98.201L1215.000 100.361L1226.250 102.709L1237.500 105.224L1248.750 107.881L1260.000 110.655L1271.250 113.519L1282.500 116.446L1293.750 119.406L1305.000 122.373L1316.250 125.316L1327.500 128.208L1338.750 131.022L1350.000 133.729L1361.250 136.304L1372.500 138.721L1383.750 140.959L1395.000 142.995L1406.250 144.809L1417.500 146.384L1428.750 147.706L1440.000 148.760L1440 240L0 240Z" fill="#2563eb" fill-opacity="0.45" /><path d="M0 164.952L11.250 166.809L22.500 168.215L33.750 169.157L45.000 169.625L56.250 169.615L67.500 169.128L78.750 168.167L90.000 166.743L101.250 164.868L112.500 162.562L123.750 159.845L135.000 156.745L146.250 153.291L157.500 149.516L168.750 145.457L180.000 141.153L191.250 136.645L202.500 131.977L213.750 127.193L225.000 122.340L236.250 117.465L247.500 112.614L258.750 107.834L270.000 103.172L281.250 98.671L292.500 94.376L303.750 90.327L315.000 86.565L326.250 83.124L337.500 80.039L348.750 77.338L360.000 75.048L371.250 73.191L382.500 71.785L393.750 70.843L405.000 70.375L416.250 70.385L427.500 70.872L438.750 71.833L450.000 73.257L461.250 75.132L472.500 77.438L483.750 80.155L495.000 83.255L506.250 86.709L517.500 90.484L528.750 94.543L540.000 98.847L551.250 103.355L562.500 108.023L573.750 112.807L585.000 117.660L596.250 122.535L607.500 127.386L618.750 132.166L630.000 136.828L641.250 141.329L652.500 145.624L663.750 149.673L675.000 153.435L686.250 156.876L697.500 159.961L708.750 162.662L720.000 164.952L731.250 166.809L742.500 168.215L753.750 169.157L765.000 169.625L776.250 169.615L787.500 169.128L798.750 168.167L810.000 166.743L821.250 164.868L832.500 162.562L843.750 159.845L855.000 156.745L866.250 153.291L877.500 149.516L888.750 145.457L900.000 141.153L911.250 136.645L922.500 131.977L933.750 127.193L945.000 122.340L956.250 117.465L967.500 112.614L978.750 107.834L990.000 103.172L1001.250 98.671L1012.500 94.376L1023.750 90.327L1035.000 86.565L1046.250 83.124L1057.500 80.039L1068.750 77.338L1080.000 75.048L1091.250 73.191L1102.500 71.785L1113.750 70.843L1125.000 70.375L1136.250 70.385L1147.500 70.872L1158.750 71.833L1170.000 73.257L1181.250 75.132L1192.500 77.438L1203.750 80.155L1215.000 83.255L1226.250 86.709L1237.500 90.484L1248.750 94.543L1260.000 98.847L1271.250 103.355L1282.500 108.023L1293.750 112.807L1305.000 117.660L1316.250 122.535L1327.500 127.386L1338.750 132.166L1350.000 136.828L1361.250 141.329L1372.500 145.624L1383.750 149.673L1395.000 153.435L1406.250 156.876L1417.500 159.961L1428.750 162.662L1440.000 164.952L1440 240L0 240Z" fill="#2563eb" /></svg>

The divider is an inline SVG, not a background image: it scales without a second request, its height is set in CSS, and it can carry a gradient of its own. The preserveAspectRatio="none" attribute is what lets it stretch to any width without the wave distorting into a spike.

CSS

.divider {
  height: 120px;
  background-color: #0b0b12;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20240%22%20width%3D%221440%22%20height%3D%22120%22%20preserveAspectRatio%3D%22none%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M0%20148.760L11.250%20149.537L22.500%20150.030L33.750%20150.234L45.000%20150.147L56.250%20149.769L67.500%20149.105L78.750%20148.160L90.000%20146.944L101.250%20145.469L112.500%20143.748L123.750%20141.799L135.000%20139.639L146.250%20137.291L157.500%20134.776L168.750%20132.119L180.000%20129.345L191.250%20126.481L202.500%20123.554L213.750%20120.594L225.000%20117.627L236.250%20114.684L247.500%20111.792L258.750%20108.978L270.000%20106.271L281.250%20103.696L292.500%20101.279L303.750%2099.041L315.000%2097.005L326.250%2095.191L337.500%2093.616L348.750%2092.294L360.000%2091.240L371.250%2090.463L382.500%2089.970L393.750%2089.766L405.000%2089.853L416.250%2090.231L427.500%2090.895L438.750%2091.840L450.000%2093.056L461.250%2094.531L472.500%2096.252L483.750%2098.201L495.000%20100.361L506.250%20102.709L517.500%20105.224L528.750%20107.881L540.000%20110.655L551.250%20113.519L562.500%20116.446L573.750%20119.406L585.000%20122.373L596.250%20125.316L607.500%20128.208L618.750%20131.022L630.000%20133.729L641.250%20136.304L652.500%20138.721L663.750%20140.959L675.000%20142.995L686.250%20144.809L697.500%20146.384L708.750%20147.706L720.000%20148.760L731.250%20149.537L742.500%20150.030L753.750%20150.234L765.000%20150.147L776.250%20149.769L787.500%20149.105L798.750%20148.160L810.000%20146.944L821.250%20145.469L832.500%20143.748L843.750%20141.799L855.000%20139.639L866.250%20137.291L877.500%20134.776L888.750%20132.119L900.000%20129.345L911.250%20126.481L922.500%20123.554L933.750%20120.594L945.000%20117.627L956.250%20114.684L967.500%20111.792L978.750%20108.978L990.000%20106.271L1001.250%20103.696L1012.500%20101.279L1023.750%2099.041L1035.000%2097.005L1046.250%2095.191L1057.500%2093.616L1068.750%2092.294L1080.000%2091.240L1091.250%2090.463L1102.500%2089.970L1113.750%2089.766L1125.000%2089.853L1136.250%2090.231L1147.500%2090.895L1158.750%2091.840L1170.000%2093.056L1181.250%2094.531L1192.500%2096.252L1203.750%2098.201L1215.000%20100.361L1226.250%20102.709L1237.500%20105.224L1248.750%20107.881L1260.000%20110.655L1271.250%20113.519L1282.500%20116.446L1293.750%20119.406L1305.000%20122.373L1316.250%20125.316L1327.500%20128.208L1338.750%20131.022L1350.000%20133.729L1361.250%20136.304L1372.500%20138.721L1383.750%20140.959L1395.000%20142.995L1406.250%20144.809L1417.500%20146.384L1428.750%20147.706L1440.000%20148.760L1440%20240L0%20240Z%22%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.45%22%20%2F%3E%3Cpath%20d%3D%22M0%20164.952L11.250%20166.809L22.500%20168.215L33.750%20169.157L45.000%20169.625L56.250%20169.615L67.500%20169.128L78.750%20168.167L90.000%20166.743L101.250%20164.868L112.500%20162.562L123.750%20159.845L135.000%20156.745L146.250%20153.291L157.500%20149.516L168.750%20145.457L180.000%20141.153L191.250%20136.645L202.500%20131.977L213.750%20127.193L225.000%20122.340L236.250%20117.465L247.500%20112.614L258.750%20107.834L270.000%20103.172L281.250%2098.671L292.500%2094.376L303.750%2090.327L315.000%2086.565L326.250%2083.124L337.500%2080.039L348.750%2077.338L360.000%2075.048L371.250%2073.191L382.500%2071.785L393.750%2070.843L405.000%2070.375L416.250%2070.385L427.500%2070.872L438.750%2071.833L450.000%2073.257L461.250%2075.132L472.500%2077.438L483.750%2080.155L495.000%2083.255L506.250%2086.709L517.500%2090.484L528.750%2094.543L540.000%2098.847L551.250%20103.355L562.500%20108.023L573.750%20112.807L585.000%20117.660L596.250%20122.535L607.500%20127.386L618.750%20132.166L630.000%20136.828L641.250%20141.329L652.500%20145.624L663.750%20149.673L675.000%20153.435L686.250%20156.876L697.500%20159.961L708.750%20162.662L720.000%20164.952L731.250%20166.809L742.500%20168.215L753.750%20169.157L765.000%20169.625L776.250%20169.615L787.500%20169.128L798.750%20168.167L810.000%20166.743L821.250%20164.868L832.500%20162.562L843.750%20159.845L855.000%20156.745L866.250%20153.291L877.500%20149.516L888.750%20145.457L900.000%20141.153L911.250%20136.645L922.500%20131.977L933.750%20127.193L945.000%20122.340L956.250%20117.465L967.500%20112.614L978.750%20107.834L990.000%20103.172L1001.250%2098.671L1012.500%2094.376L1023.750%2090.327L1035.000%2086.565L1046.250%2083.124L1057.500%2080.039L1068.750%2077.338L1080.000%2075.048L1091.250%2073.191L1102.500%2071.785L1113.750%2070.843L1125.000%2070.375L1136.250%2070.385L1147.500%2070.872L1158.750%2071.833L1170.000%2073.257L1181.250%2075.132L1192.500%2077.438L1203.750%2080.155L1215.000%2083.255L1226.250%2086.709L1237.500%2090.484L1248.750%2094.543L1260.000%2098.847L1271.250%20103.355L1282.500%20108.023L1293.750%20112.807L1305.000%20117.660L1316.250%20122.535L1327.500%20127.386L1338.750%20132.166L1350.000%20136.828L1361.250%20141.329L1372.500%20145.624L1383.750%20149.673L1395.000%20153.435L1406.250%20156.876L1417.500%20159.961L1428.750%20162.662L1440.000%20164.952L1440%20240L0%20240Z%22%20fill%3D%22%232563eb%22%20%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}

A wave between two sections is decoration, and a screen reader should not have to announce it: every download here is marked aria-hidden. Keep it that way — the section heading already says where one section ends.

Tailwind classes

relative h-[120px] w-full bg-[#0b0b12] text-[#2563eb] bg-[image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20240%22%20width%3D%221440%22%20height%3D%22120%22%20preserveAspectRatio%3D%22none%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M0%20148.760L11.250%20149.537L22.500%20150.030L33.750%20150.234L45.000%20150.147L56.250%20149.769L67.500%20149.105L78.750%20148.160L90.000%20146.944L101.250%20145.469L112.500%20143.748L123.750%20141.799L135.000%20139.639L146.250%20137.291L157.500%20134.776L168.750%20132.119L180.000%20129.345L191.250%20126.481L202.500%20123.554L213.750%20120.594L225.000%20117.627L236.250%20114.684L247.500%20111.792L258.750%20108.978L270.000%20106.271L281.250%20103.696L292.500%20101.279L303.750%2099.041L315.000%2097.005L326.250%2095.191L337.500%2093.616L348.750%2092.294L360.000%2091.240L371.250%2090.463L382.500%2089.970L393.750%2089.766L405.000%2089.853L416.250%2090.231L427.500%2090.895L438.750%2091.840L450.000%2093.056L461.250%2094.531L472.500%2096.252L483.750%2098.201L495.000%20100.361L506.250%20102.709L517.500%20105.224L528.750%20107.881L540.000%20110.655L551.250%20113.519L562.500%20116.446L573.750%20119.406L585.000%20122.373L596.250%20125.316L607.500%20128.208L618.750%20131.022L630.000%20133.729L641.250%20136.304L652.500%20138.721L663.750%20140.959L675.000%20142.995L686.250%20144.809L697.500%20146.384L708.750%20147.706L720.000%20148.760L731.250%20149.537L742.500%20150.030L753.750%20150.234L765.000%20150.147L776.250%20149.769L787.500%20149.105L798.750%20148.160L810.000%20146.944L821.250%20145.469L832.500%20143.748L843.750%20141.799L855.000%20139.639L866.250%20137.291L877.500%20134.776L888.750%20132.119L900.000%20129.345L911.250%20126.481L922.500%20123.554L933.750%20120.594L945.000%20117.627L956.250%20114.684L967.500%20111.792L978.750%20108.978L990.000%20106.271L1001.250%20103.696L1012.500%20101.279L1023.750%2099.041L1035.000%2097.005L1046.250%2095.191L1057.500%2093.616L1068.750%2092.294L1080.000%2091.240L1091.250%2090.463L1102.500%2089.970L1113.750%2089.766L1125.000%2089.853L1136.250%2090.231L1147.500%2090.895L1158.750%2091.840L1170.000%2093.056L1181.250%2094.531L1192.500%2096.252L1203.750%2098.201L1215.000%20100.361L1226.250%20102.709L1237.500%20105.224L1248.750%20107.881L1260.000%20110.655L1271.250%20113.519L1282.500%20116.446L1293.750%20119.406L1305.000%20122.373L1316.250%20125.316L1327.500%20128.208L1338.750%20131.022L1350.000%20133.729L1361.250%20136.304L1372.500%20138.721L1383.750%20140.959L1395.000%20142.995L1406.250%20144.809L1417.500%20146.384L1428.750%20147.706L1440.000%20148.760L1440%20240L0%20240Z%22%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.45%22%20%2F%3E%3Cpath%20d%3D%22M0%20164.952L11.250%20166.809L22.500%20168.215L33.750%20169.157L45.000%20169.625L56.250%20169.615L67.500%20169.128L78.750%20168.167L90.000%20166.743L101.250%20164.868L112.500%20162.562L123.750%20159.845L135.000%20156.745L146.250%20153.291L157.500%20149.516L168.750%20145.457L180.000%20141.153L191.250%20136.645L202.500%20131.977L213.750%20127.193L225.000%20122.340L236.250%20117.465L247.500%20112.614L258.750%20107.834L270.000%20103.172L281.250%2098.671L292.500%2094.376L303.750%2090.327L315.000%2086.565L326.250%2083.124L337.500%2080.039L348.750%2077.338L360.000%2075.048L371.250%2073.191L382.500%2071.785L393.750%2070.843L405.000%2070.375L416.250%2070.385L427.500%2070.872L438.750%2071.833L450.000%2073.257L461.250%2075.132L472.500%2077.438L483.750%2080.155L495.000%2083.255L506.250%2086.709L517.500%2090.484L528.750%2094.543L540.000%2098.847L551.250%20103.355L562.500%20108.023L573.750%20112.807L585.000%20117.660L596.250%20122.535L607.500%20127.386L618.750%20132.166L630.000%20136.828L641.250%20141.329L652.500%20145.624L663.750%20149.673L675.000%20153.435L686.250%20156.876L697.500%20159.961L708.750%20162.662L720.000%20164.952L731.250%20166.809L742.500%20168.215L753.750%20169.157L765.000%20169.625L776.250%20169.615L787.500%20169.128L798.750%20168.167L810.000%20166.743L821.250%20164.868L832.500%20162.562L843.750%20159.845L855.000%20156.745L866.250%20153.291L877.500%20149.516L888.750%20145.457L900.000%20141.153L911.250%20136.645L922.500%20131.977L933.750%20127.193L945.000%20122.340L956.250%20117.465L967.500%20112.614L978.750%20107.834L990.000%20103.172L1001.250%2098.671L1012.500%2094.376L1023.750%2090.327L1035.000%2086.565L1046.250%2083.124L1057.500%2080.039L1068.750%2077.338L1080.000%2075.048L1091.250%2073.191L1102.500%2071.785L1113.750%2070.843L1125.000%2070.375L1136.250%2070.385L1147.500%2070.872L1158.750%2071.833L1170.000%2073.257L1181.250%2075.132L1192.500%2077.438L1203.750%2080.155L1215.000%2083.255L1226.250%2086.709L1237.500%2090.484L1248.750%2094.543L1260.000%2098.847L1271.250%20103.355L1282.500%20108.023L1293.750%20112.807L1305.000%20117.660L1316.250%20122.535L1327.500%20127.386L1338.750%20132.166L1350.000%20136.828L1361.250%20141.329L1372.500%20145.624L1383.750%20149.673L1395.000%20153.435L1406.250%20156.876L1417.500%20159.961L1428.750%20162.662L1440.000%20164.952L1440%20240L0%20240Z%22%20fill%3D%22%232563eb%22%20%2F%3E%3C%2Fsvg%3E)] bg-no-repeat bg-bottom bg-[length:100%_100%]

Apply these classes to an empty element. The SVG wave is included as a background image.

How does SVG Wave Generator work?

The top edge is sampled as a sine, orthogonal steps, triangular peaks or rounded bumps. Wave count, phase and horizontal mirroring apply to all four styles. A full phase period returns to the starting shape.

Filled dividers close along the bottom edge. Hairline mode keeps an open path so the sides and bottom are not stroked. An optional back layer uses lower amplitude, a shifted phase and reduced opacity.

preserveAspectRatio="none" maps the SVG coordinates independently to its width and height. Amplitude is relative to the viewBox and scales with the chosen height. The preview, SVG dimensions and PNG use that height; stretching still changes the proportions.

The CSS export percent-encodes the SVG data URL and includes the upper background color. The standalone SVG stays transparent outside the waves; the PNG includes the preview background. Decorative markup is marked aria-hidden so it does not add an unnamed graphic to the reading order.

Wave settings

style      smooth
amplitude  46%
peaks      2
phase      18%

Generated SVG

<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 1440 240" width="1440" height="120"
  preserveAspectRatio="none" aria-hidden="true"
  focusable="false">
  <path d="M0 164.952L11.250 166.809L22.500 168.215L33.750 169.157L45.000 169.625L56.250 169.615L67.500 169.128L78.750 168.167L90.000 166.743L101.250 164.868L112.500 162.562L123.750 159.845L135.000 156.745L146.250 153.291L157.500 149.516L168.750 145.457L180.000 141.153L191.250 136.645L202.500 131.977L213.750 127.193L225.000 122.340L236.250 117.465L247.500 112.614L258.750 107.834L270.000 103.172L281.250 98.671L292.500 94.376L303.750 90.327L315.000 86.565L326.250 83.124L337.500 80.039L348.750 77.338L360.000 75.048L371.250 73.191L382.500 71.785L393.750 70.843L405.000 70.375L416.250 70.385L427.500 70.872L438.750 71.833L450.000 73.257L461.250 75.132L472.500 77.438L483.750 80.155L495.000 83.255L506.250 86.709L517.500 90.484L528.750 94.543L540.000 98.847L551.250 103.355L562.500 108.023L573.750 112.807L585.000 117.660L596.250 122.535L607.500 127.386L618.750 132.166L630.000 136.828L641.250 141.329L652.500 145.624L663.750 149.673L675.000 153.435L686.250 156.876L697.500 159.961L708.750 162.662L720.000 164.952L731.250 166.809L742.500 168.215L753.750 169.157L765.000 169.625L776.250 169.615L787.500 169.128L798.750 168.167L810.000 166.743L821.250 164.868L832.500 162.562L843.750 159.845L855.000 156.745L866.250 153.291L877.500 149.516L888.750 145.457L900.000 141.153L911.250 136.645L922.500 131.977L933.750 127.193L945.000 122.340L956.250 117.465L967.500 112.614L978.750 107.834L990.000 103.172L1001.250 98.671L1012.500 94.376L1023.750 90.327L1035.000 86.565L1046.250 83.124L1057.500 80.039L1068.750 77.338L1080.000 75.048L1091.250 73.191L1102.500 71.785L1113.750 70.843L1125.000 70.375L1136.250 70.385L1147.500 70.872L1158.750 71.833L1170.000 73.257L1181.250 75.132L1192.500 77.438L1203.750 80.155L1215.000 83.255L1226.250 86.709L1237.500 90.484L1248.750 94.543L1260.000 98.847L1271.250 103.355L1282.500 108.023L1293.750 112.807L1305.000 117.660L1316.250 122.535L1327.500 127.386L1338.750 132.166L1350.000 136.828L1361.250 141.329L1372.500 145.624L1383.750 149.673L1395.000 153.435L1406.250 156.876L1417.500 159.961L1428.750 162.662L1440.000 164.952L1440 240L0 240Z" fill="#2563eb"/>
</svg>

What options and edge cases does SVG Wave Generator support?

What each control does
Parameter	Type	Default	Behaviour & edge cases
Smooth	sampled sine	—	A sampled sine with at least 64 samples per period.
Steps	staircase	—	Horizontal segments and vertical transitions.
Peaks	triangle	—	A sampled triangular waveform.
Bumps	rounded lobes	—	Rounded lobes sampled from the absolute sine function.
Amplitude	percentage	46	Amplitude relative to the viewBox; changing height scales it.
Wave count	count	2	Number of complete waves across the width.
Phase	percentage	18%	A percentage of one period, applied to every style; 0 and 100 match.
Flip	mirror	off	Mirrors the phase and wave horizontally.
Layers	1 or 2	2	A fainter back layer with reduced amplitude and shifted phase.
preserveAspectRatio	none	always	Width and height map independently, so stretching changes proportions.

Frequently asked questions

How do I add a wave to a section?

Paste the SVG or use the CSS background-image rule. The CSS export already percent-encodes the SVG and sets the selected height and upper background color.

Why does the wave stretch?

preserveAspectRatio="none" maps width and height independently. It fills the wrapper but changes proportions when its dimensions change. Keep the selected height for the intended shape.

Does phase work for all styles?

Yes. It shifts smooth, stepped, triangular and rounded-bump waves. Zero and 100 percent represent the same phase.

Why are two layers useful?

The fainter back layer adds depth. It uses reduced amplitude and a phase offset; depending on settings, the curves can cross.

Does hairline mode outline the whole SVG?

No. It exports an open top-edge path, so the sides and bottom are not stroked.

Is the background included in every download?

The SVG is transparent outside the waves. CSS includes the upper background color, and PNG includes the preview background.

ToolsByUs team · How we check our tools