Zehn nahtlose SVG-Hintergrundmuster: Punkte, Raster, Wellen, Sechsecke und mehr. Stelle Größe, Linienstärke, Farben, Deckkraft und Winkel ein und kopiere dann CSS oder SVG mit einem pattern-Element.
Wähle eine von zehn Kachelformen, stelle Kachelgröße, Linienstärke, Farben, Deckkraft und Winkel ein und erhalte einen nahtlosen SVG-Hintergrund. Kopiere ihn als CSS-background-image mit Data-URL, die sich auf jedem Element wiederholt, oder als SVG-Datei auf Basis des pattern-Elements für den Einsatz in Grafiken. Beides wird in deinem Browser gezeichnet und angezeigt.
SVG-Kachel oder CSS-Verlaufsmuster?
Bedarf
Greif zu
Warum
Kurven, Sechsecke, Wellen, Pluszeichen
SVG-Kachel (dieses Tool)
Jede Form, die SVG zeichnen kann
Einfache Streifen, Punkte, Karos
CSS-Verläufe
Ganz ohne Bild, siehe den CSS-Hintergrund-Generator
Muster innerhalb einer SVG-Illustration
<pattern>-Element
Füllt jede SVG-Form
Mit Verlaufstricks lassen sich Streifen und Punkte zeichnen, aber bei Wellen, Sechsecken und Konturen stoßen sie an Grenzen. Eine kleine SVG-Kachel kann alles zeichnen, bleibt bei jeder Zoomstufe scharf und verursacht als Data-URL keine zusätzliche Anfrage für die Seite.
Wähle ein Muster. Die Vorschau füllt eine große Fläche, damit du die Textur in echter Größe beurteilen kannst.
Passe die Kachelgröße und die Linienstärke oder den Punktradius an und wähle dann Vordergrund- und Hintergrundfarbe.
Senke die Deckkraft der Vordergrundfarbe für eine dezente Textur und lege einen Winkel fest, wenn die Kacheln gedreht sein sollen.
Kopiere das CSS für einen Hintergrund, das SVG einer einzelnen Kachel oder das vollständige SVG mit pattern-Element.
Hintergrundtexturen sollten flüstern. Eine Deckkraft zwischen 0.1 und 0.25 auf einem getönten Hintergrund kommt Text selten in die Quere.
Richte die Kachelgröße an deiner Abstandsskala aus, zum Beispiel 16, 24 oder 32 Pixel, damit die Linien mit deinem Layoutraster übereinstimmen.
Wenn du ein Muster drehst, wechselt das Tool zur Form mit pattern-Element, weil eine gedrehte Einzelkachel nicht mehr nahtlos anschließen würde.
Setze Muster auf einen Wrapper oder ein Pseudo-Element hinter dem Inhalt, damit du sie an einer Stelle ändern oder entfernen kannst.
Häufige Fragen
Warum werden # und < in der Data-URL kodiert?
In einer URL leitet # ein Fragment ein und schneidet das Bild ab, und manche Parser lehnen rohe spitze Klammern ab. Als %23, %3C und %3E kodiert bleibt das SVG intakt. Doppelte Anführungszeichen werden zu einfachen, damit der String in url("...") passt.
Was bewirkt patternUnits="userSpaceOnUse"?
Es misst Breite und Höhe der Kachel in denselben Einheiten wie die Zeichnung, sodass eine 24er-Kachel überall 24 Pixel breit ist. Der Standard objectBoundingBox bemisst Kacheln stattdessen als Bruchteile der gefüllten Form.
Kann ich das Muster in Tailwind verwenden?
Ja. Füge die CSS-Regel als Klasse in dein Stylesheet ein oder nutze beliebige Werte wie bg-[url(...)] mit der Data-URL. Eine Klasse ist besser lesbar, wenn die URL lang ist.
Sind diese Muster kostenlos nutzbar?
Ja. Jede Kachel wird vom Code auf dieser Seite aus einfachen Formen gezeichnet, daher gehört das Ergebnis dir, ohne dass eine Namensnennung nötig ist.
So funktioniert eine nahtlose Kachel
Eine Kachel wiederholt sich Kante an Kante, daher muss alles, was rechts hinausragt, links wieder hereinkommen. Das diagonale Muster zeichnet zum Beispiel in zwei Ecken kurze zusätzliche Segmente, damit die Linien ohne Lücke über die Kachelgrenzen weiterlaufen.
Linien, die mittig auf der Kachelkante liegen, wie beim Raster, werden von der Kachel halbiert. Zwei benachbarte Kacheln ergeben dann zusammen eine Linie in voller Breite, und deshalb wirkt das Raster gleichmäßig.
Zwei Wege, es auszuliefern
Für Hintergründe ist eine CSS-Data-URL am einfachsten: eine Regel, keine Datei zum Hosten, und background-size steuert die Größe. Der Browser dekodiert die Kachel einmal und wiederholt sie.
Innerhalb einer SVG-Illustration definierst du ein pattern in defs und füllst Formen mit url(#id). patternTransform kann das ganze Muster drehen oder skalieren, ohne es neu zu zeichnen.
Attribute für SVG-Muster
Attribute des pattern-Elements, die der Generator nutzt
Attribut
Standard
Was es tut
width / height
Größe einer Kachel; ein Wert von 0 zeichnet nichts
patternUnits
objectBoundingBox
Einheiten für x, y, width, height; dieses Tool nutzt userSpaceOnUse
patternContentUnits
userSpaceOnUse
Einheiten für die Formen innerhalb der Kachel
patternTransform
none (Identität)
Das ganze Muster drehen, skalieren oder neigen
Verschieben, wo die erste Kachel beginnt
Muster als CSS-Hintergrund
Sechseck-Konturtextur hinter einer Karte
Eine 28 Pixel große Sechseck-Kachel mit halber Deckkraft. Ändere background-size, um die Textur zu skalieren.
Dieselbe Kachel mit dem pattern-Element
Nutze das in Inline-SVG-Grafiken. Jede Form kann fill="url(#p)" erhalten.
Tupfen
Millimeterraster
Diagonale Linien
Pluszeichen
Zickzack
Wellen
Dreiecke
Schachbrett
Ringe
Sechsecke
Muster-Generator
Muster: Tupfen, Millimeterraster, Diagonale Linien, Pluszeichen, Zickzack, Wellen, Dreiecke, Schachbrett, Ringe, Sechsecke. Stelle Größe, Linienstärke, Farben, Deckkraft und Winkel ein und kopiere dann CSS oder SVG.