SVG-Wellen- Generator
Glatte SVG-Wellentrenner für Sektionsübergänge generieren.
① Höhe, Amplitude und Farbe anpassen ② Vorschau in Echtzeit ③ SVG oder HTML-Snippet kopieren
Höhe (px) 120
Amplitude (px) 40
Wellen 2
Wellenfarbe
#C9B89A
Hintergrund
#0E0E0E
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" width="100%" preserveAspectRatio="none">
<path d="M 0 60 Q 180 20 360 60 Q 540 100 720 60 Q 900 20 1080 60 Q 1260 100 1440 60 L 1440 120 L 0 120 Z" fill="#c9b89a"/>
</svg>
Was sind SVG-Wellentrenner und wie werden sie verwendet?
SVG-Wellentrenner sind skalierbare Vektorgrafiken für glatte Übergänge zwischen Webseitensektionen. Im Gegensatz zu PNG/JPG sind SVG-Wellen auflösungsunabhängig und skalieren auf jedem Bildschirm perfekt. Sie werden typischerweise am Ende einer Sektion platziert. Die Wellenform wird durch ein <path>-Element innerhalb eines <svg> mit quadratischen Bézier-Kurven (Befehl Q) definiert. Das Attribut preserveAspectRatio="none" stellt sicher, dass die Welle immer die volle Breite einnimmt.
Häufig gestellte Fragen
Ein SVG-Wellentrenner ist eine skalierbare Vektorgrafik als visueller Trennbalken zwischen Sektionen. Er ist eine gefüllte Form mit gebogenem oberen Rand. Als SVG skaliert er pixelgenau.
HTML-Snippet kopieren und am Ende einer Sektion einfügen. width="100%" und preserveAspectRatio="none" für volle Breitenanpassung verwenden.
Amplitude steuert die Höhe der Wellengipfel. Typische Werte: 20px (subtil) bis 80px (dramatisch).
Frequenz steuert die Anzahl vollständiger Wellen. 1 = sanfte S-Kurve, 2–3 = typisches Wellenmuster, 4+ = viele kleine Wellen.
Glatte Wellen (quadratische Bezier-Kurven) sind die häufigste Wahl für modernes Design. Eckige Wellen erzeugen einen geometrischen, kristallinen Effekt.
Der Flip-Schalter spiegelt die Welle vertikal. Normal = gefüllter Bereich unten. Gespiegelt = gefüllter Bereich oben.
Ja. CSS-Animation auf das <svg>-Element mit translateX() auf breiterem viewBox. viewBox-Breite auf 2880 verdoppeln und den Pfad wiederholen.