SVG-Streifenmuster-Generator
Erstellen Sie ein individuelles Streifenmuster als Vektorgrafik: Farben, Streifenbreite und Winkel sind einstellbar. Laden Sie die SVG-Datei herunter oder kopieren Sie den Code direkt, um ihn in Ihre Website einzubinden. Die Erstellung erfolgt zu 100% lokal, nichts wird an einen Server gesendet.
So funktioniert es
Ein Streifenmuster als Banner-Hintergrund, Abschnittshintergrund oder Illustration muss bei jeder Bildschirmgröße scharf bleiben. Wenn Sie es als SVG statt als PNG erzeugen, bleibt das Muster vektorbasiert: Es lässt sich vergrößern oder wiederholen, ohne jemals unscharf oder pixelig zu werden. Stellen Sie die beiden Farben, die Streifenbreite und deren Winkel ein und holen Sie sich anschließend die einsatzbereite Datei.
Wie verwende ich dieses Muster als CSS-Hintergrund?
Laden Sie die SVG-Datei herunter und verweisen Sie als Hintergrund darauf, etwa mit background-image: url('motif-rayures.svg'), oder kopieren Sie den SVG-Code und kodieren Sie ihn als Data-URI, wenn Sie eine zusätzliche HTTP-Anfrage vermeiden möchten.
Wiederholt sich das Muster auf einer großen Fläche automatisch?
Ja: Die Streifen werden über ein natives SVG-Element <pattern> erzeugt, das sich als Kachel über die gesamte definierte Fläche wiederholt, unabhängig von der gewählten Rechteckgröße. Sie können also ein kleines Muster erzeugen und es bei Bedarf mit CSS-background-repeat verwenden.
Datenschutz: Das SVG wird vollständig in Ihrem Browser erstellt, es werden weder Daten noch Einstellungen an einen Server gesendet.