Design / SVG

SVG-Wellengenerator für Abschnittstrenner

Erstelle glatte, geschichtete SVG-Wellen für den Übergang zwischen zwei Seitenabschnitten: Wähle die Anzahl der Ebenen und Wellen, Höhe, Glätte und Farbe. Lade anschließend die SVG-Datei herunter oder kopiere sie als CSS-Hintergrund.

SVG-Wellengenerator für Abschnittstrenner: Jede Ebene besteht aus einer Reihe von Punkten, die sich in zufälligen Abständen abwechselnd über und unter einer Grundlinie befinden. Die Punkte werden durch eine glatte Kurve verbunden, die bis zur unteren Kante gefüllt ist. Die hinteren Ebenen sind blasser, wodurch ein Tiefeneindruck entsteht. Die SVG-Datei passt sich jeder Breite an. Die CSS-Version bettet sie als Daten-URI-Hintergrund ein. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
SVG-Wellen-GeneratorLokale Verarbeitung

Läuft vollständig in deinem Browser

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

Das SVG lässt sich auf jede Breite strecken (preserveAspectRatio="none") und eignet sich daher für Abschnittstrenner über die gesamte Breite. Platziere es am unteren Rand eines Abschnitts und verwende die Hintergrundfarbe des nächsten Abschnitts oder drehe es für den oberen Rand um. Derselbe Zufallswert zeichnet immer dieselbe Welle.

SVG oder CSS?

Inline-SVG lässt sich per CSS gestalten und animieren, und seine Füllung kann currentColor verwenden. Als CSS-Hintergrund ist das SVG eine Data-URI: Es muss nichts zusätzlich geladen werden, aber die Farbe ist im Code festgelegt. Die Datei ist in beiden Fällen nur wenige Hundert Bytes groß; mit dem SVG-Bereinigungstool lässt sie sich noch weiter optimieren.

Glätte

Die Kurve ist eine Catmull-Rom-Spline, die in kubische Bézier-Segmente umgewandelt wird: Bei voller Glätte verläuft sie sanft durch jeden Punkt, bei null entstehen gerade Linien zwischen den Punkten, wodurch eine gezackte Bergkante entsteht.

So benutzt du es

  1. Lege die Anzahl der Ebenen und Wellen sowie deren Höhe fest.
  2. Wähle eine Farbe und spiegle die Welle für den oberen Rand eines Abschnitts.
  3. Klicke auf neue zufällige Wellen und lade anschließend die SVG-Datei herunter oder kopiere das CSS.

Datenschutz & Einschränkungen

Die Wellen werden in deinem Browser gezeichnet.

Ähnliche Tools

SVG-BlobCSS-MusterCSS-Farbverlauf

Häufige Fragen

Wie verwende ich die Welle zwischen zwei Abschnitten?

Gib der Welle die Farbe des darunterliegenden Abschnitts und platziere sie über die gesamte Breite am unteren Rand des darüberliegenden Abschnitts. Spiegle sie, wenn du sie stattdessen am oberen Rand eines Abschnitts verwenden möchtest.

Ergeben dieselben Einstellungen immer dieselbe Welle?

Ja: Die Form wird aus einem Zufallsstartwert erzeugt und ändert sich daher erst, wenn du auf eine neue Welle klickst.

Darf ich die Wellen kommerziell verwenden?

Ja: Die Formen werden für dich erzeugt und unterliegen keinen Lizenzbeschränkungen.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig