SVG-Wellen-Generator
Kostenloser SVG-Wellen-Generator online: 1-5 weiche Wellenebenen übereinander, Grundlinie, Amplitude, Wellenlänge und Glättung einstellen, Zweifarboverlauf anwenden und den Vektorcode exportieren.
Was macht der SVG-Wellen-Generator?
Er erzeugt dekorative Wellenformen als fertigen SVG-Code. Sie können 1-5 Ebenen übereinanderlegen, jede mit eigener Grundlinienhöhe, Amplitude, Wellenlänge und Glättung, und alle mit einem gemeinsamen Zweifarboverlauf füllen.
Wie werden die Wellenkurven gezeichnet?
Jede Ebene entsteht in einem eigenen Pfad-Generator: Die Welle wird in Halbwellenlängen-Segmente geteilt, jedes Segment wird mit kubischen Bézier-Kontrollpunkten gezeichnet. So bleibt die Datei winzig und bei jedem Zoom perfekt glatt.
Was bewirkt der Glättungs-Regler?
Bei 0 % werden die Segmente zu geraden Linien und die Welle wirkt zackig. Beim Erhöhen rücken die Bézier-Kontrollpunkte nach außen, bei 100 % erhalten Sie vollständige sinusähnliche Kurven.
Wo kann ich das exportierte SVG einsetzen?
Überall, wo HTML oder SVG erlaubt ist: Hero-Hintergründe, Trenner zwischen Seitenbereichen, Fußzeilen, Präsentationen und Design-Tools. Den kopierten Code direkt ins HTML einfügen oder über die Download-Schaltfläche als .svg speichern.
Bleibt die Welle bei jeder Größe scharf?
Ja. Der Export behält einen 1440x480-ViewBox bei, die Grafik ist reine Vektorgeometrie. Auf 100 % Seitenbreite ziehen oder für Druck vergrößern — die Kurven verschwimmen nie.
Wie funktioniert der Zufalls-Button?
Er wählt eine neue zufällige Ebenenzahl zwischen 1 und 5, neue Zufallswerte für jeden Parameter und zwei harmonische Zufallsfarben und zeichnet die Vorschau sofort neu. Einfach so oft drücken, bis es gefällt.
Kann ich meine Markenfarben verwenden?
Ja. Die zwei Farbwähler legen Start- und Endpunkt des linearen Verlaufs fest, den alle Ebenen teilen — eine Änderung färbt die ganze Wellengruppe um.
Werden Daten an einen Server gesendet?
Nein. Der Generator läuft vollständig im Browser mit reinem JavaScript. Farben und Einstellungen verlassen die Seite nie, die exportierte Datei wird lokal auf Ihrem Gerät erzeugt.
So verwenden Sie SVG-Wellen-Generator
Der SVG-Wellen-Generator erzeugt geschichtete Wellenformen als sauberen, einfügebereiten SVG-Code. Jede Ebene ist eine weiche kubische Bézier-Kurve, gefüllt mit einem gemeinsamen Zweifarben-Linearverlauf — perfekt für Hero-Sektion-Hintergründe, Seitentrenner und Footer-Dekorationen. Alles wird in deinem Browser erzeugt — nichts wird hochgeladen.
- Wähle im Ebenen-Auswahlfeld, wie viele Ebenen (1-5) du willst. Die Ebenen werden von hinten nach vorn gezeichnet, jede neue Ebene malt über die vorherigen.
- Wähle die Verlaufsanfangs- und -endfarbe mit den zwei Farbwählern — alle Ebenen teilen sich diesen Linearverlauf.
- Feinjustiere jede Ebene mit ihren vier Reglern: Die Grundlinienhöhe verschiebt die Welle auf und ab, die Amplitude legt fest, wie hoch die Kämme sind, die Wellenlänge steuert den horizontalen Abstand zwischen Kämmen, und die Glättung blendet von geraden Zickzacklinien (0%) zu voll sinusförmigen kubischen Bézier-Kurven (100%).
- Drücke Zufällig, um sofort eine frische Kombination aus Ebenenzahlen, Formen und Farben zu erzeugen, bis etwas richtig aussieht.
- Drücke SVG herunterladen, um eine .svg-Datei zu sichern, oder Quelle kopieren, um das vollständige SVG-Markup in die Zwischenablage zu legen — bereit zum Einfügen in jede HTML-Datei oder jedes Design-Tool.
Für Webseiten-Sektionstrenner setze das SVG zwischen zwei Blöcke und lasse es sich auf 100 % Breite dehnen — der viewBox hält die Kurven bei jeder Größe verzerrungsfrei. Niedrige Glättung mit kurzen Wellenlängen wirkt handgezeichnet, volle Glättung mit langen Wellenlängen sieht aus wie ein ruhiges Meer.
Verwandte Tools
- SVG-Optimierer SVG-Dateien sofort im Browser optimieren und komprimieren. Metadaten, Kommentare und Editordaten entfernen, Dateigröße um bis zu 60% reduzieren.
- SVG zu PNG Konverter Konvertieren Sie SVG sofort in PNG, JPEG oder WebP im Browser. Skalierung, Größe und Hintergrundfarbe anpassbar. Kostenlos, privat, kein Upload.
- PNG zu SVG Konverter Kostenloser Online PNG-zu-SVG-Konverter. Verwandeln Sie PNG, JPG und andere Bitmaps in skalierbare Vektor-SVGs mit Farb- und Detailkontrolle - komplett im Browser.
- Border Radius Generator Kostenloser Online Border-Radius-Generator. Ziehen Sie 8 Griffe oder wählen Sie eine Blob-Vorlage, um organische CSS-Formen zu erstellen und den Code sofort zu kopieren.
- Farbkonverter Kostenloser Online-Farbkonverter. Konvertieren Sie HEX, RGB, HSL, HSV Formate sofort mit visueller Farbauswahl. 100% privat, läuft in Ihrem Browser.
- CSS Easing Generator Kostenloser Online-CSS-Easing-Generator. Ziehen Sie die cubic-bezier-Kontrollpunkte auf einer interaktiven Kurve, wählen Sie aus 18 Vorlagen, sehen Sie eine Ball-Loop-Animation und kopieren Sie die Timing-Funktion sofort.
- CSS Text-Shadow-Generator Kostenloser Online-Text-Shadow-Generator. Stapeln Sie mehrere Schattenebenen mit Versatz, Unschärfe, Farbe und Deckkraft, testen Sie Vorlagen wie Neon, 3D oder Retro und kopieren Sie das CSS sofort.
- CSS Clip-Path Generator Kostenloser Online-CSS-Clip-Path-Generator. Gestalten Sie Polygon-, Kreis-, Ellipsen- und Inset-Formen mit verschiebbaren Punkten, Live-Vorschau und Codekopieren mit einem Klick.