SVG-Wellen-Generator

Geschichtete SVG-Wellen für moderne Layouts

Wellen-Trenner sind eine beliebte Methode, um den Übergang zwischen zwei Abschnitten einer Webseite weicher zu gestalten. Statt einer harten horizontalen Linie verleiht eine geschwungene Kante Hero-Bannern, Footern, Preistabellen und Landingpages Bewegung und Tiefe. Dieser SVG-Wellen-Generator erstellt diese Formen für Sie. Er stapelt mehrere halbtransparente oder deckende Ebenen, jede mit ihrer eigenen zufälligen Kurve, und verblendet sie zwischen zwei Farben, sodass das Ergebnis wie sanfte Hügel oder Wasser aussieht.

Da die Ausgabe reines SVG ist, bleibt sie in jeder Größe gestochen scharf, wiegt nur wenige hundert Byte und lässt sich gestalten, animieren oder direkt in Ihr HTML einbetten. Sie können sie auch als CSS-background-image-Data-URI kopieren – praktisch, wenn Sie einem Projekt keine zusätzlichen Dateien hinzufügen können.

Was die Regler verändern

Ebenen legt fest, wie viele überlappende Wellen gezeichnet werden – von einer einzigen klaren Kurve bis zu sechs gestapelten Bändern. Amplitude steuert, wie hoch Wellenkämme und -täler ausfallen. Komplexität ist die Anzahl der Wellenkämme über die gesamte Breite: Niedrige Werte ergeben lange, träge Dünungen, hohe Werte eine kabbelige See. Glätte bestimmt, wie die Punkte verbunden werden: Bei 0 % ist die Welle eckig wie ein Zickzack, bei 100 % wird sie zu einer runden Kurve aus kubischen Bézier-Segmenten. Die Füllung kann eine Mischung aus zwei Volltonfarben sein, eine pro Ebene, oder ein horizontaler Verlauf, dessen Deckkraft nach vorne hin zunimmt.

Ihre Welle verwenden und exportieren

Jede Welle wird aus einem numerischen Seed erzeugt, sodass ein Design vollständig reproduzierbar ist: Notieren Sie sich den Seed und die Reglerwerte, und Sie können es später exakt wiederherstellen. Verwenden Sie Flip vertically für Wellen, die vom oberen Rand eines Abschnitts herabhängen, und aktivieren Sie einen transparenten Hintergrund, wenn das SVG auf einer anderen Farbe liegen soll. Laden Sie das SVG für das Web herunter oder exportieren Sie ein PNG mit 1440 × 480 Pixeln für Präsentationen und Designtools. Wenn Sie das SVG in eine Seite einbauen, strecken Sie es auf volle Breite und setzen Sie den Hintergrund des Abschnitts auf die Hintergrundfarbe der Welle, um feine Nahtlinien zu vermeiden. Alles wird lokal in Ihrem Browser berechnet – ohne Upload und ohne Konto.