SVG-Wellen-Generator

Erstelle glatte SVG-Wellen für Abschnittstrenner

Wellen sind eine der elegantesten Möglichkeiten, zwei Abschnitte einer Seite zu trennen — sie bringen Bewegung, Charakter und Tiefe ins Design, ohne ein Bild zu benötigen. Dieser SVG-Wellen-Generator erzeugt ein einfaches <path>-Element innerhalb eines <svg>, das sich mit width: 100% an jeden Container anpasst.

Regler

• Segmente — wie viele Wellenbuckel. Ein Segment ergibt eine einzelne sanfte Kurve; zehn Segmente ein sehr bewegtes Muster.
• Amplitude — der vertikale Ausschlag jedes Buckels. Niedrige Amplitude liefert zarte Wellen, hohe Amplitude dramatische Formen.
• Seed — deterministische Ganzzahl, die die zufällige Variation zwischen den Buckeln steuert. Neu würfeln wechselt zur nächsten Form.
• Spiegeln — wechselt zwischen unterem Trenner (Welle oben, Füllung unten) und oberem Trenner (Welle unten, Füllung oben).
• Füllung — Volltonfarbe oder zweifarbiger linearer Verlauf mit beliebigem Winkel.

Verwendung

Da das SVG preserveAspectRatio="none" nutzt, kannst du es auf jede Breite strecken, indem du es in einen Container mit CSS-width packst — die Welle skaliert mit der Seite und behält ihre Höhe. Füge das SVG direkt in dein HTML, deine React-Komponente oder dein Template-System ein.

<div style="width:100%"><!-- generiertes svg --></div>

Typische Einsatzzwecke

• Trenner zwischen Hero-Bereich und nachfolgendem Block
• Verspielte Footer
• Animierte Hintergrundkurven (der Pfad lässt sich mit CSS oder SMIL animieren)
• Dekorative Formen hinter Preis-, Testimonial- oder Feature-Karten
• Lade-Platzhalter und Abschnittsübergänge

Der Pfad ist deterministisch — derselbe Seed liefert immer dieselbe Welle — sobald du eine gute Form gefunden hast, bleibt sie stabil. Speichere das SVG als Datei, wenn du es in einem Vektoreditor bearbeiten oder die Farben manuell anpassen willst.