Generador de ondas SVG

Diseña separadores de sección con ondas suaves, escalones, picos o cúpulas. Ajusta la altura, la amplitud, el número de ondas y la fase, y combina una o dos capas. Puedes exportar una forma rellena o una línea abierta como SVG, copiar su CSS o descargar un PNG.

Solo local

Ajustes predefinidos

Elige un preajuste para configurar todos los controles a la vez y ajusta después.

Estilo de onda

Altura120pxAmplitud46%Frecuencia2Fase18%

Color de fondo

Color de la onda

Capas

Grosor6pxRelleno sólidoVoltear en horizontal

Un preajuste ajusta todos los controles con un clic; Aleatorio hace lo mismo con valores al azar.

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>

El separador es un SVG en línea, no una imagen de fondo: se escala sin una segunda petición, su altura se define en CSS y puede llevar su propio degradado. El atributo preserveAspectRatio="none" es lo que le permite estirarse a cualquier anchura sin que la onda se deforme en un 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%;
}

Una onda entre dos secciones es decoración y un lector de pantalla no debería anunciarla: todas las descargas llevan aria-hidden. Mantenlo así, porque el título de la sección ya indica dónde termina.

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

Aplica estas clases a un elemento vacío. La onda SVG se incluye como imagen de fondo.

¿Cómo funciona Generador de ondas SVG?

El generador construye una curva a partir de muestras: una onda sinusoidal para el estilo suave, segmentos horizontales y verticales para los escalones, una onda triangular para los picos y lóbulos redondeados para las curvas abombadas. El resultado se guarda en elementos `path` de SVG.

La amplitud controla la altura de la curva dentro de un `viewBox` de 240 unidades. El número de ondas fija los ciclos que caben en el ancho y la fase desplaza el patrón en los cuatro estilos. Las fases 0 y 100 representan la misma posición.

La segunda capa utiliza menor amplitud y opacidad y una fase desplazada. La reflexión invierte la curva horizontalmente. El contorno de línea fina permanece abierto para que no aparezca un borde alrededor de toda la caja.

El SVG exportado tiene un fondo transparente. El CSS incorpora una URL de datos codificada y el PNG utiliza el fondo elegido. `preserveAspectRatio="none"` permite adaptar ancho y alto por separado: la altura final del elemento determina la amplitud visible en píxeles.

Ajustes de la onda

Estilo de onda Suave
Altura 120px
Amplitud 46%
Frecuencia 2
Fase 18%

SVG generado

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

¿Qué opciones y casos límite admite Generador de ondas SVG?

Referencia técnica y opciones
Parámetro	Tipo	Valor predeterminado	Comportamiento y casos límite
Suave	onda sinusoidal muestreada	—	Dibuja una onda sinusoidal a partir de muestras distribuidas a lo largo del ancho.
Escalones	línea escalonada	—	Combina tramos horizontales y verticales para crear un contorno escalonado.
Picos	onda triangular	—	Forma picos y valles con una onda triangular muestreada.
Abombada	lóbulos redondeados	—	Forma curvas redondeadas mediante muestras de una función sinusoidal.
Amplitud	porcentaje	46	Ajusta la altura de la onda en el `viewBox`; su altura visible escala con la altura del elemento.
Número de ondas	cantidad	2	Determina el número de ciclos que recorren el ancho del separador.
Fase	porcentaje	18%	Desplaza el patrón en cualquiera de los cuatro estilos; 0% y 100% producen la misma curva.
Reflejar	reflexión horizontal	desactivado	Invierte la curva de izquierda a derecha.
Capas	1 o 2	2	Añade una segunda onda al fondo con menor amplitud y opacidad, y una fase desplazada.
preserveAspectRatio	none	siempre	Adapta las coordenadas al ancho y al alto del elemento de forma independiente.

Preguntas frecuentes

¿Cómo añado una onda a una sección?

Copia el SVG y colócalo en el borde de la sección, o utiliza el CSS con la URL de datos generada. Define el ancho y la altura del separador en tu página para controlar la proporción final.

¿Por qué mi onda se ve estirada o aplastada?

El SVG usa `preserveAspectRatio="none"`, por lo que el ancho y el alto escalan por separado. Ajusta la altura del elemento para cambiar la amplitud visible y revisa sus dimensiones CSS.

¿Debo usar SVG en línea o una imagen de fondo?

El SVG en línea permite modificar sus elementos y colores desde la página. El CSS con URL de datos resulta útil si prefieres colocarlo como fondo. Ambos conservan las curvas vectoriales; el PNG es una imagen de tamaño fijo.

¿Cómo creo dos separadores reflejados?

Activa la reflexión horizontal para invertir la curva de izquierda a derecha. Para darle la vuelta verticalmente, utiliza `transform: rotate(180deg)` en el elemento. El control de fase desplaza el patrón, sin cambiar su orientación.

¿Es accesible el separador?

El SVG decorativo incluye `aria-hidden="true"` y `focusable="false"` para que los lectores de pantalla no lo anuncien. Si utilizas una imagen PNG para decorar, deja vacío su atributo `alt`.

¿Cómo coloco la onda arriba de una sección?

Sitúa el separador en el borde superior y gira el SVG con `transform: rotate(180deg)` si necesitas invertirlo. Ajusta su color al fondo de la sección contigua para unir ambas superficies.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas