SVG Generator: Blobs, Wellen, Muster und Verläufe

SVG-Blob, Welle oder Muster erzeugen: Methode und Export

Der Generator berechnet Vektorpfade aus einem Zufalls-Seed: Gleicher Seed und gleiche Einstellungen ergeben immer genau dieselbe Datei. Es gibt sechs Modi (Blob, Wellen, Wiederholungsmuster, Mesh-Verlauf, Höhenlinien, Badge), exportierbar als SVG, React-Komponente, CSS-Hintergrund, Data-URI oder PNG bis zur vierfachen Größe. Der Standard-Blob ist kleiner als 1 KB.

So entsteht ein Blob

Das Tool verteilt N Punkte auf einem Kreis (N = Komplexität, 3 bis 16), dessen Radius 35 % der kürzeren Seite beträgt. Jeder Radius wird zufällig um bis zu ± (Zufall ÷ 10) × 22,5 % des Radius verschoben, nie unter 20 px. Danach verbindet eine Catmull-Rom-Kurve die Punkte, umgerechnet in kubische Bézier-Segmente, deren Spannung der Regler Rundung bestimmt. Der Zufall stammt aus einem deterministischen Pseudozufallsgenerator (Mulberry32), der mit dem Seed initialisiert wird.

Beispiel

Standardeinstellungen: Fläche 600 × 600 px, 8 Punkte, Zufall 6, Seed 42. Der Grundradius beträgt 210 px, jeder Punkt weicht höchstens 28,35 px ab, und der Pfad hat 8 Bézier-Segmente. Die SVG-Datei ist mit ihrem dreifarbigen linearen Verlauf 952 Byte groß; als Base64-Data-URI wächst sie auf etwa 1.300 Zeichen, ein Drittel mehr. Seed 43 ergibt eine andere Form, Seed 42 immer dieselbe.

Optionen und Grenzen

• Effekte: Körnung (fraktaler Rauschfilter), Schlagschatten, Drehung, Spiegelung, 12 Paletten und 10 Vorlagen.
• Die Animation fügt CSS-Regeln in die Datei ein: Sie funktioniert im Browser, aber nicht in den meisten Layoutprogrammen und nicht im PNG-Export, der ein Einzelbild speichert.
• Körnung und die Unschärfe des Mesh-Verlaufs beruhen auf SVG-Filtern, die auf großen Flächen oder Mobilgeräten rechenintensiv sind.
• Die React-Komponente entsteht durch Umwandlung des SVG-Textes: Prüfen Sie sie, bevor Sie sie in ein typisiertes Projekt übernehmen.

Alles wird in Ihrem Browser berechnet; kein Bild wird an einen Server gesendet.

Häufig gestellte Fragen

Wie erhalte ich genau dieselbe SVG-Form wieder?

Notieren Sie den angezeigten Seed (standardmäßig 42) und Ihre Einstellungen: Der Pseudozufallsgenerator des Tools erzeugt mit demselben Seed immer denselben Pfad. Ändern Sie nur den Seed, etwa auf 43, entsteht mit denselben Parametern eine neue Form. Die Zufallstaste wählt einen Seed zwischen 0 und 99.999.

Besser als SVG oder als PNG exportieren?

SVG bleibt in jeder Größe scharf und wiegt bei einem einfachen Blob oft unter 1 KB (952 Byte mit den Standardeinstellungen). PNG eignet sich für Programme ohne Vektorunterstützung; das Tool exportiert es in 1-, 2- oder 4-facher Flächengröße, bei einer 600-px-Fläche also 2.400 × 2.400 px in 4x. Die Animation geht im PNG verloren.

Wie nutze ich den Blob als CSS-Seitenhintergrund?

Wählen Sie das CSS-Format: Das Tool komprimiert das SVG, kodiert es als Data-URI und liefert eine background-image-Regel mit background-size: cover und Zentrierung. Fügen Sie sie in das Stylesheet Ihres Abschnitts ein. Das Base64-Data-URI-Format ist etwa ein Drittel größer als das ursprüngliche SVG.

Funktioniert die Animation überall?

Die Animation ist als CSS (Keyframes) in die SVG-Datei geschrieben. Sie läuft, wenn das SVG im Browser angezeigt wird, doch Figma, Illustrator oder PowerPoint ignorieren sie meist, und der PNG-Export speichert nur ein Standbild. Die Geschwindigkeit liegt zwischen 2 und 16 Sekunden pro Durchlauf.

Ist das Tool wirklich kostenlos?

Ja, alle Werkzeuge auf Kristools sind zu 100% kostenlos und ohne Registrierung zugänglich.

Sind meine Daten geschützt?

Ja. Die gesamte Verarbeitung erfolgt sicher und direkt in Ihrem Browser. Es werden keine persönlichen Daten an unsere Server gesendet.