ToolCabana

SVG-Muster-Generator

Erzeuge wiederholbare Punkte, Streifen und geometrische Muster.

Favorites are saved in this browser. Find them in My favorites.

SVG-Muster-Generator

Your input stays in this browser unless stated otherwise
Clear your input, files and result, and restore the default settings.
=

Make it yours

Adjust the values, then get your result.

So verwendest du SVG-Muster-Generator

SVG pattern generator creates a repeating dots, diagonal stripes or grid pattern as an SVG file. Pick foreground and background colors, a tile spacing from 4 to 200 px, and a dot radius or stroke width from 1 to 50 px. The output is a 600 by 400 SVG built on a pattern element, shown as markup and downloadable as pattern.svg.

  1. Gib die angeforderten Werte im Einstellungsbereich ein.
  2. Passe die Grundeinstellungen an und öffne dann den Erweiterten Modus für Export- und Feinabstimmungsoptionen. Benutzerdefinierte Einstellungen bleiben aktiv, wenn das Panel geschlossen wird.
  3. Führe den SVG-Muster-Generator aus, prüfe die Ausgabe und verwende dann die verfügbaren Bedienelemente zum Kopieren oder Herunterladen.

Was dieses Tool unterstützt

Erzeuge wiederholbare Punkte, Streifen und geometrische Muster.

Muster
dots · stripes · grid
Vordergrund
Set this value for your task.
Hintergrund
Set this value for your task.
Abstand (px)
Range: 4 to 200
Punktradius / Strichstärke (px)
Range: 1 to 50

Grenzen und Verarbeitung

Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.

Häufige Fragen

How do I use the SVG pattern as a CSS background?

Download pattern.svg and reference it with background-image in CSS, or paste the markup inline. The file is a 600 by 400 image, so the browser repeats that whole image; choose a spacing that divides 600 and 400 evenly, such as 20 or 40, for clean seams.

Why do the stripes appear as diagonal lines?

The stripes pattern draws one line from the top-left to the bottom-right corner of each square tile, producing 45-degree diagonals. Spacing sets the tile size and the stroke value sets line thickness. For horizontal and vertical lines, choose the grid pattern.

Can I make the pattern background transparent?

Not from the settings: each tile includes a rectangle filled with the background color you pick. For transparency, remove that rect element or give it a fill-opacity of 0 in the downloaded SVG markup.

Wo wird meine Eingabe verarbeitet?

Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.

Welche Eingabelimits gelten?

Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.