Générateur de vagues SVG

Dessinez des séparateurs de section avec des vagues douces, des marches, des pointes ou des bosses. Réglez la hauteur, l’amplitude, le nombre de vagues et la phase, avec une ou deux couches. Exportez une forme remplie ou une ligne ouverte en SVG, copiez son CSS ou téléchargez un PNG.

100 % local

Préréglages

Choisissez un préréglage pour régler tous les contrôles d’un coup, puis ajustez.

Style de vague

Hauteur120pxAmplitude46%Fréquence2Phase18%

Couleur de fond

Couleur de la vague

Couches

Épaisseur6pxRemplissage uniRetourner horizontalement

Un préréglage règle tous les curseurs en un clic ; Aléatoire fait de même avec des valeurs aléatoires.

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>

Le séparateur est un SVG en ligne, pas une image de fond : il s’adapte sans requête supplémentaire, sa hauteur se règle en CSS et il peut porter son propre dégradé. L’attribut preserveAspectRatio="none" lui permet de s’étirer à toute largeur sans que la vague ne se déforme en pointe.

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

Une vague entre deux sections est décorative : un lecteur d’écran ne doit pas l’annoncer. Tous les téléchargements portent aria-hidden. Gardez-le ainsi, le titre de section indique déjà où elle se termine.

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

Appliquez ces classes à un élément vide. La vague SVG est intégrée comme image d’arrière-plan.

Comment fonctionne Générateur de vagues SVG ?

Le générateur construit une courbe à partir d’échantillons : une sinusoïde pour le style lisse, des segments horizontaux et verticaux pour les marches, une onde triangulaire pour les pics et des lobes arrondis pour les bosses. Le résultat est enregistré dans des éléments SVG `path`.

L’amplitude règle la hauteur de la courbe dans un `viewBox` de 240 unités. Le nombre de vagues fixe les cycles sur la largeur et la phase déplace le motif dans les quatre styles. Les phases 0 et 100 correspondent à la même position.

La seconde couche utilise une amplitude et une opacité réduites, avec une phase décalée. La réflexion inverse la courbe horizontalement. Le tracé de ligne fine reste ouvert afin de ne pas créer de bordure autour de toute la boîte.

Le SVG exporté a un fond transparent. Le CSS intègre une URL de données encodée et le PNG utilise le fond choisi. `preserveAspectRatio="none"` adapte la largeur et la hauteur séparément : la hauteur finale de l’élément détermine l’amplitude visible en pixels.

Paramètres de la vague

Style de vague Douce
Hauteur 120px
Amplitude 46%
Fréquence 2
Phase 18%

SVG généré

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

Quelles options et quels cas limites Générateur de vagues SVG prend en charge ?

Référence technique et options
Paramètre	Type	Valeur par défaut	Comportement et cas limites
Lisse	sinusoïde échantillonnée	—	Dessine une sinusoïde à partir de points répartis sur la largeur.
Marches	ligne en escalier	—	Associe des segments horizontaux et verticaux pour créer un contour en escalier.
Pics	onde triangulaire	—	Crée des pics et des creux à partir d’une onde triangulaire échantillonnée.
Bosses	lobes arrondis	—	Crée des courbes arrondies à partir d’échantillons d’une fonction sinusoïdale.
Amplitude	pourcentage	46	Règle la hauteur de la vague dans le `viewBox` ; sa hauteur visible varie avec celle de l’élément.
Nombre de vagues	nombre	2	Détermine le nombre de cycles sur la largeur du séparateur.
Phase	pourcentage	18%	Décale le motif dans les quatre styles ; 0% et 100% produisent la même courbe.
Réflexion	symétrie horizontale	désactivée	Inverse la courbe de gauche à droite.
Couches	1 ou 2	2	Ajoute une seconde vague derrière la première, avec une amplitude et une opacité réduites et une phase décalée.
preserveAspectRatio	none	toujours	Adapte les coordonnées à la largeur et à la hauteur de l’élément indépendamment.

Questions fréquentes

Comment ajouter une vague à une section ?

Copiez le SVG et placez-le au bord de la section, ou utilisez le CSS avec l’URL de données générée. Définissez la largeur et la hauteur du séparateur sur votre page pour régler ses proportions finales.

Pourquoi la vague paraît-elle étirée ou écrasée ?

Le SVG utilise `preserveAspectRatio="none"` : la largeur et la hauteur évoluent séparément. Réglez la hauteur de l’élément pour changer l’amplitude visible et vérifiez ses dimensions CSS.

Faut-il utiliser un SVG en ligne ou une image de fond ?

Le SVG en ligne permet de modifier ses éléments et ses couleurs depuis la page. Le CSS avec une URL de données convient si vous préférez un fond. Les deux conservent les courbes vectorielles ; le PNG est une image de dimensions fixes.

Comment créer deux séparateurs en miroir ?

Activez la réflexion horizontale pour inverser la courbe de gauche à droite. Pour la retourner verticalement, appliquez `transform: rotate(180deg)` à l’élément. La phase déplace le motif sans changer son orientation.

Le séparateur est-il accessible ?

Le SVG décoratif inclut `aria-hidden="true"` et `focusable="false"` pour que les lecteurs d’écran ne l’annoncent pas. Si vous utilisez un PNG comme décoration, laissez son attribut `alt` vide.

Comment placer la vague en haut d’une section ?

Placez le séparateur au bord supérieur et faites pivoter le SVG avec `transform: rotate(180deg)` si nécessaire. Accordez sa couleur avec le fond de la section voisine pour joindre les deux surfaces.

Équipe ToolsByUs · Comment nous vérifions nos outils