SVG-Wellen-Generator

Der SVG-Wellen-Generator erstellt dekorative Abschnittstrenner mit glatten Wellen, Stufen, Spitzen oder Rundungen. Stellen Sie Höhe, Amplitude, Wellenanzahl, Phase und Ebenen ein und exportieren Sie SVG, CSS mit Daten-URI oder PNG. Wählen Sie zwischen einer gefüllten Fläche und einer offenen Wellenlinie.

Nur lokal

Vorlagen

Wählen Sie eine Vorlage, um alle Regler auf einmal zu setzen, und passen Sie sie dann an.

Wellenform

Höhe120pxAmplitude46%Frequenz2Phase18%

Hintergrundfarbe

Wellenfarbe

Ebenen

Stärke6pxEinfarbige FüllungHorizontal spiegeln

Eine Vorlage setzt alle Regler mit einem Klick; Zufall tut dasselbe mit zufälligen Werten.

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>

Der Trenner ist ein Inline-SVG, kein Hintergrundbild: Er skaliert ohne zweite Anfrage, seine Höhe steht in CSS, und er kann einen eigenen Verlauf tragen. Das Attribut preserveAspectRatio="none" lässt ihn auf jede Breite strecken, ohne dass die Welle zur Spitze verzerrt.

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

Eine Welle zwischen zwei Abschnitten ist Dekoration und muss nicht vorgelesen werden: Alle Downloads sind mit aria-hidden versehen. Lassen Sie das so – die Überschrift sagt bereits, wo ein Abschnitt endet.

Tailwind-Klassen

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

Wenden Sie diese Klassen auf ein leeres Element an. Die SVG-Welle ist als Hintergrundbild enthalten.

Wie funktioniert SVG-Wellen-Generator?

Die Wellenkontur wird in einer `viewBox` von 1440 × 240 Einheiten berechnet. Die Formen basieren auf einer abgetasteten Sinuskurve, rechtwinkligen Stufen, einer Dreieckswelle oder abgerundeten Sinusbögen. Wellenanzahl und Phase beeinflussen alle vier Stile.

Im Flächenmodus schließt der Pfad entlang der Unterkante. Im Linienmodus bleibt er offen, damit nur die Wellenkontur gezeichnet wird. Eine zweite, schwächere Ebene kann hinter der ersten liegen; durch ihren Phasenversatz können sich die Konturen kreuzen.

`preserveAspectRatio="none"` passt Breite und Höhe unabhängig an den Zielbereich an. Die sichtbare Amplitude skaliert deshalb mit der eingestellten Höhe. Der CSS-Export kodiert das SVG als Daten-URI; SVG und PNG stehen ebenfalls als direkte Ausgabe zur Verfügung.

Der SVG-Hintergrund bleibt transparent, während die CSS- und PNG-Darstellung die eingestellte obere Hintergrundfarbe verwenden. Das dekorative SVG trägt `aria-hidden="true"` und `focusable="false"`. Behalten Sie diese Attribute bei, wenn der Trenner keine inhaltliche Bedeutung hat.

Welleneinstellungen

Wellenform Weich
Höhe 120px
Amplitude 46%
Frequenz 2
Phase 18%

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

Welche Optionen und Sonderfälle unterstützt SVG-Wellen-Generator?

Technische Referenz und Optionen
Parameter	Typ	Standard	Verhalten & Sonderfälle
Glatt	abgetastete Sinuskurve	—	Erzeugt eine gleichmäßige Wellenkontur aus vielen Stützpunkten pro Periode.
Stufen	rechtwinklige Stufen	—	Verbindet waagerechte Abschnitte durch senkrechte Übergänge und erzeugt eine abgestufte Kontur.
Spitzen	Dreieckswelle	—	Verbindet steigende und fallende Geraden zu einer regelmäßigen Kontur mit Spitzen.
Rundungen	abgerundete Sinusbögen	—	Bildet eine Folge gerundeter Bögen aus einer Sinusfunktion. Es werden keine elliptischen SVG-Bögen verwendet.
Amplitude	Prozent	46	Bestimmt die Auslenkung der Kontur. Die sichtbare Höhe skaliert mit der Höhe des ausgegebenen SVG.
Wellenanzahl	Anzahl	2	Bestimmt die Anzahl der vollständigen Wellen über die gesamte Breite, bei allen vier Stilen.
Phase	Prozent einer Periode	18 %	Verschiebt die Kontur um einen Anteil einer Periode. 0 % und 100 % ergeben bei allen Stilen dieselbe Form.
Spiegeln	horizontale Spiegelung	inaktiv	Spiegelt die Wellenkontur von links nach rechts. Eine vertikale Drehung können Sie auf Ihrer Website separat per CSS anwenden.
Ebenen	1 oder 2	2	Die hintere Welle hat 60 % der Amplitude, 12 % Phasenversatz und 45 % Deckkraft. Die Konturen können sich kreuzen.
preserveAspectRatio	none	immer	Passt die Koordinaten unabhängig an die Breite und Höhe des Elements an. Die Amplitude bleibt daher nicht als feste Pixelhöhe erhalten.

Häufig gestellte Fragen

Wie füge ich einen Wellentrenner in meine Website ein?

Fügen Sie das erzeugte SVG an der gewünschten Stelle ein oder kopieren Sie das CSS mit der SVG-Daten-URI als Hintergrund. Legen Sie die Höhe des Trenners passend zum Abschnitt fest. Der CSS-Export kodiert Sonderzeichen wie `#` bereits für die URL.

Warum wirkt meine Welle gestreckt oder gestaucht?

Der Export verwendet `preserveAspectRatio="none"`, damit sich Breite und Höhe unabhängig an die Zielbox anpassen. Eine andere Boxhöhe verändert die sichtbare Amplitude. Stellen Sie die gewünschte Höhe im Tool ein und verwenden Sie sie auch auf Ihrer Website.

Soll ich Inline-SVG oder einen CSS-Hintergrund verwenden?

Inline-SVG eignet sich, wenn Sie einzelne Pfade direkt gestalten möchten. Ein CSS-Hintergrund hält das Markup der Seite kurz und lässt sich für mehrere Elemente wiederverwenden. Beide Varianten bleiben Vektorgrafiken; PNG ist eine Rasterausgabe für Programme, die SVG nicht unterstützen.

Wie erstelle ich spiegelbildliche Trenner?

Aktivieren Sie „Spiegeln“, um die Kontur horizontal zu spiegeln. Für einen Trenner an der oberen Abschnittskante können Sie zusätzlich `transform: rotate(180deg)` verwenden. Eine Phasenverschiebung verändert die Position der Welle und ersetzt keine allgemeine Spiegelung.

Ist der Trenner für Screenreader geeignet?

Das dekorative SVG trägt `aria-hidden="true"` und `focusable="false"`, damit Hilfstechniken es überspringen. Behalten Sie diese Attribute, solange die Welle nur der Gestaltung dient. Inhaltlich relevante Informationen gehören in den Text des Abschnitts.

Wie setze ich die Welle an den Anfang eines Abschnitts?

Drehen Sie das SVG mit `transform: rotate(180deg)` und platzieren Sie es an der oberen Abschnittskante. Passen Sie die Füll- und Hintergrundfarben an die angrenzenden Abschnitte an. Die Höhe des Zielbereichs bestimmt weiterhin die sichtbare Wellenhöhe.

ToolsByUs-Team · Wie wir unsere Tools prüfen