SVG-Wellenteiler und Blob-Formen sind zu einem Standardelement im modernen Webdesign geworden. Landing Pages, SaaS-Dashboards und Mobile-Onboarding-Screens nutzen sie, um flache Layouts aufzubrechen und visuelle Tiefe zwischen Sektionen zu erzeugen. Die Formen selbst sind einfach; ein paar rauschbasierte Pfade, verbunden mit Bezier-Kurven. Aber die Werkzeuge dafür waren historisch begrenzt.
Die meisten Generatoren im Web bieten eine einzelne Wellenebene, ein Exportformat und minimale Kontrolle über das Ergebnis. Wenn du Mehrschicht-Tiefe, Deckkraft pro Ebene oder eine React-Komponente brauchst, die du direkt in deine Codebasis einfügen kannst, landest du entweder beim manuellen Codieren von SVG-Pfaden oder kämpfst mit Design-Tools, die nicht für diesen Workflow gebaut wurden.
Dieser Artikel behandelt, wie SVG-Wellen- und Blob-Generierung unter der Haube funktioniert; die Mathematik hinter Simplex-Rauschen, den Unterschied zwischen Wellenpfaden und radialen Blob-Formen, praktische Integrationsmuster für React- und Tailwind-Projekte, und einen kostenlosen browserbasierten Generator, der in sechs Formaten exportiert, ohne einen Server zu berühren.
Was bestehende Generatoren falsch machen
Tools wie SVG Wave, Get Waves und Blobmaker lösen jeweils einen Teil des Problems. SVG Wave und Get Waves erzeugen einschichtige Wellenteiler. Blobmaker kann organische Formen, aber keine Wellen. Keines ermöglicht es, mehrere Ebenen mit unabhängiger Deckkraft zu stapeln, als React-Komponente zu exportieren oder auf hellen und dunklen Hintergründen vorzuschauen.
Die Lücke liegt in Produktions-Workflows. Eine einschichtige Welle mit zufälliger Form reicht für einen Prototyp. Aber wenn du einen Dreischicht-Sektionsteiler mit spezifischen Markenfarben, kontrollierter Amplitude pro Ebene und einem Ergebnis brauchst, das sich direkt in eine Next.js-Komponente einfügt; reichen die Einschicht-Generatoren nicht aus.
Wie der Generator tatsächlich funktioniert
Das Tool hat zwei Modi: Wellen und Blobs. Jeder verwendet einen anderen Algorithmus, optimiert für seinen Formtyp.
Wellen: Simplex-Rauschen auf der horizontalen Achse
Wellenformen werden mit Simplex-Rauschen generiert, speziell der noise2D-Funktion. Für jede Wellenebene tastet der Generator Rauschwerte entlang der horizontalen Achse ab, um Y-Versätze zu berechnen. Diese Punkte werden mit kubischen Bézier-Kurven verbunden, um glatte, organisch aussehende Wellenpfade zu erzeugen.
Die Schlüsselparameter pro Ebene:
- Amplitude: steuert die Höhe der Wellen (die vertikale Verschiebung)
- Frequenz: wie viele Wellenzyklen über die Breite erscheinen
- Deckkraft: Transparenz jeder Ebene, die beim Stapeln Tiefe erzeugt
- Farbe: unabhängige Hex-Farbe pro Ebene
- Seed: ein Zufallswert, der jeder Welle ihre einzigartige Form gibt
Du kannst bis zu 5 Ebenen stapeln. Der visuelle Trick, der mehrschichtige Wellen gut aussehen lässt, ist einfach: platziere dunklere, opakere Ebenen vorne und hellere, transparentere hinten. Das erzeugt einen Parallax-ähnlichen Tiefeneffekt, den eine einzelne flache Welle nicht erreichen kann.
Blobs: Radiales Rauschen mit Catmull-Rom-Splines
Blob-Formen funktionieren anders. Der Generator verteilt Punkte gleichmäßig um einen Kreis, dann variiert er den Radius jedes Punktes mit Simplex-Rauschen. Die resultierenden Punkte werden mit Catmull-Rom-zu-Bézier-Splines verbunden, um eine glatte, geschlossene organische Form zu erzeugen.
Parameter für Blobs:
- Punkte: wie viele Kontrollpunkte auf dem Kreis (mehr Punkte = komplexere Kanten)
- Komplexität: wie stark das Rauschen den Radius variiert (höher = unregelmäßiger)
- Größe: der Durchmesser des Basiskreises
- Farbe: Füllfarbe
Die Mathematik ist elegant. Ken Perlins Simplex-Rauschen ist stetig; nahe Eingabewerte erzeugen nahe Ausgabewerte. Das ist es, was die Formen natürlich aussehen lässt statt gezackt. Math.random() würde ein stacheliges Durcheinander ergeben. Simplex-Rauschen gibt dir fließende Kurven.
Sechs Exportformate, und warum das wichtig ist
Der Generator exportiert in sechs Formaten:
- Roher SVG-Code: direkt in HTML einfügen
- CSS
background-image: ein Data-URI für einebackground-image-Eigenschaft - React-Komponente: eine einsatzbereite JSX-Funktion mit Props
- SVG-Datei-Download: Standard
.svg-Datei - PNG-Datei-Download: in 2x Auflösung für Retina-Displays gerastert
- Zwischenablage-Kopie für alle Code-Formate
Der React-Export spart die meiste Zeit. Statt SVG-Attribute manuell von kebab-case zu camelCase zu konvertieren (stroke-width zu strokeWidth, fill-opacity zu fillOpacity), übernimmt das Tool die Konvertierung automatisch. Wenn du mit React oder Next.js baust, reduziert das die Reibung erheblich.
Praktische Muster für Webentwickler
Sektionsteiler in Landing Pages
Der häufigste Anwendungsfall. Platziere ein Wellen-SVG zwischen deiner Hero-Sektion und deinem Inhaltsbereich:
<section class="hero bg-indigo-900 text-white">
<h1>Dein Produkt</h1>
</section>
<!-- Wellenteiler generiert von Kitmul -->
<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
<!-- füge deine generierten Pfade hier ein -->
</svg>
<section class="content bg-white">
<p>Dein Feature-Bereich</p>
</section>
Wenn du bestimmte Markenfarben treffen musst, kann der Farbpaletten-Generator dir helfen, komplementäre Schattierungen für deine Wellenebenen zu finden. Und wenn du Animation hinzufügen willst, erzeugt der CSS-Animations-Generator Keyframe-Animationen, die du direkt auf SVG-Elemente anwenden kannst.
Kombination mit anderen CSS-Effekten
SVG-Wellen passen gut zu anderen CSS-Eigenschaften. Füge einen Box-Shadow zur Sektion über der Welle hinzu. Verwende einen Glassmorphism-Effekt auf Karten. Wende einen CSS-Gradienten auf die Sektion unter der Welle an.
Warum clientseitige Generierung wichtig ist
Jedes Cloud-basierte Design-Tool arbeitet nach dem gleichen Modell: lade deine Absicht hoch, warte auf den Server, lade das Ergebnis herunter. Für SVG-Generierung ist das architektonisch absurd. Die Berechnung, die für die Erzeugung einer Wellen-SVG nötig ist, ist trivial. Dein Browser kann das in unter 5 Millisekunden erledigen.
Clientseitige Tools halten deine Daten auf deinem Gerät. Das ist die gleiche Philosophie hinter allen Design & CSS-Tools von Kitmul; vom CSS Grid Generator bis zum Clip-path Maker, alles wird lokal verarbeitet.
Probier es aus
Der SVG-Wellen- und Blob-Generator ist kostenlos, läuft in deinem Browser und benötigt nichts außer einem modernen Browser-Tab. Generiere eine Welle, klicke ein paar Mal auf Randomize, und kopiere den Code.
Die vollständige Sammlung der Design & CSS-Utilities umfasst 16 Generatoren für Gradienten, Schatten, Animationen, Border-Radius, Flexbox-Layouts, Grid-Layouts und mehr. Alles clientseitig, alles kostenlos.
Die gesamte Verarbeitung läuft lokal in deinem Browser. Es werden keine Daten an einen Server gesendet. Das Tool ist kostenlos, offen, und hat keine Konten oder Limits.