Gerador de ondas SVG

Desenhe divisores de seção com ondas suaves, degraus, picos ou cúpulas. Ajuste a altura, a amplitude, a quantidade de ondas e a fase, usando uma ou duas camadas. Exporte uma forma preenchida ou uma linha aberta como SVG, copie seu CSS ou baixe um PNG.

Só local

Predefinições

Escolha uma predefinição para ajustar todos os controles de uma vez e depois refine.

Estilo de onda

Altura120pxAmplitude46%Frequência2Fase18%

Cor de fundo

Cor da onda

Camadas

Espessura6pxPreenchimento sólidoEspelhar na horizontal

Uma predefinição ajusta todos os controles com um clique; Aleatório faz o mesmo com valores sorteados.

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>

O divisor é um SVG em linha, não uma imagem de fundo: escala sem uma segunda requisição, sua altura é definida em CSS e pode carregar um gradiente próprio. O atributo preserveAspectRatio="none" permite esticá-lo para qualquer largura sem a onda virar um pico.

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%;
}

Uma onda entre duas seções é decoração e um leitor de tela não precisa anunciá-la: todos os downloads são marcados com aria-hidden. Mantenha assim — o título da seção já indica onde ela termina.

Classes do Tailwind

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%]

Aplique estas classes a um elemento vazio. A onda SVG está incluída como imagem de fundo.

Como funciona o Gerador de ondas SVG?

A ferramenta calcula pontos ao longo de uma largura de 1440 unidades e uma altura de 240 unidades. O estilo suave usa uma senoide; degraus usa trechos horizontais e verticais; picos usa uma onda triangular; e o estilo arredondado usa arcos de uma senoide, amostrados como pontos.

A amplitude controla a altura da onda dentro da viewBox, e o número de ondas define quantas repetições ocupam a largura. A fase desloca todos os estilos ao longo de um período: 0% e 100% produzem a mesma posição. O espelhamento inverte a forma horizontalmente.

O modo preenchido fecha o caminho até a borda da seção. O modo de linha fina mantém somente a curva aberta, sem traçar o retângulo da área. Uma segunda onda pode ser desenhada atrás, com menor amplitude e opacidade.

O SVG usa `preserveAspectRatio="none"`, permitindo redimensionar largura e altura de forma independente. A altura exibida altera a amplitude em pixels. O CSS incorpora o SVG em uma URL codificada, e o PNG é renderizado localmente com a cor de fundo selecionada.

Configurações da onda

Estilo de onda Suave
Altura 120px
Amplitude 46%
Frequência 2
Fase 18%

SVG gerado

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

Quais opções e casos-limite o Gerador de ondas SVG suporta?

Referência técnica e opções
Parâmetro	Tipo	Padrão	Comportamento e casos-limite
Suave	senoide amostrada	—	Calcula pontos de uma senoide para produzir uma curva contínua.
Degraus	escada	—	Alterna segmentos horizontais e verticais para criar uma silhueta em degraus.
Picos	onda triangular	—	Usa uma onda triangular com subidas e descidas retas.
Arredondada	curvas amostradas	—	Usa uma senoide em valor absoluto para criar curvas arredondadas, amostradas como pontos.
Amplitude	porcentagem	46	Controla a altura da onda na viewBox. A amplitude em pixels acompanha a altura exibida do SVG.
Número de ondas	quantidade	2	Define o número de repetições da forma ao longo de toda a largura.
Fase	porcentagem	18%	Desloca todos os estilos por uma fração do período. 0% e 100% são equivalentes.
Espelhamento	horizontal	desativado	Reflete o caminho da esquerda para a direita sem alterar a altura.
Camadas	1 ou 2	2	A onda traseira usa 60% da amplitude, deslocamento de fase de 12% e opacidade de 45%.
preserveAspectRatio	none	sempre	Ajusta as coordenadas à caixa do elemento, escalando largura e altura de forma independente.

Perguntas frequentes

Como adiciono um separador de ondas a uma seção em CSS?

Cole o SVG no fim da seção ou use o CSS gerado como imagem de fundo. A exportação já codifica os caracteres especiais da URL. Ajuste a altura do elemento para controlar a altura visual do separador.

Por que minha onda parece esticada ou achatada?

Com `preserveAspectRatio="none"`, largura e altura são ajustadas de forma independente. Aumentar a largura alonga a curva na horizontal; aumentar a altura aumenta sua amplitude em pixels. Ajuste a altura e a amplitude para obter o resultado desejado.

O separador deve ser um SVG ou uma imagem de fundo?

O SVG inline facilita editar a marcação e os atributos de cor. A imagem de fundo com data URI pode ser mais prática para reutilizar o separador no CSS. As duas opções usam a mesma geometria; os valores de cor exportados são explícitos.

Como faço dois separadores que se espelham?

Use o controle de espelhamento para refletir a forma na horizontal. A fase muda a posição da onda dentro de um período. Para colocar a mesma forma no topo de uma seção, você também pode girar o SVG em 180 graus.

O separador é acessível?

Um separador puramente decorativo deve ser ignorado por leitores de tela. O SVG exportado inclui `aria-hidden="true"` e `focusable="false"`. Mantenha os títulos e a estrutura da página como os indicadores de conteúdo.

Como coloco a onda no topo de uma seção em vez do fim?

Aplique `transform: rotate(180deg)` para virar o separador. Se também precisar refletir a direção horizontal, use `scaleX(-1)`. Depois ajuste a altura e a posição no layout.

Equipe ToolsByUs · Como verificamos nossas ferramentas