Générateur de motif SVG rayures

Créez un motif de rayures vectoriel personnalisé : couleurs, épaisseur et angle réglables. Téléchargez le fichier SVG ou copiez le code directement pour l'intégrer à votre site. Génération 100% locale, rien n'est envoyé à un serveur.

Couleur des rayures

Couleur de fond

Épaisseur : 20px

Angle : 45°

Largeur (px)

Hauteur (px)

Comment ça marche

Un motif de rayures en arrière-plan de bannière, de fond de section ou d'illustration doit rester net à toutes les tailles d'écran. En le générant en SVG plutôt qu'en PNG, le motif reste vectoriel : il s'agrandit ou se répète sans jamais devenir flou ni pixelisé. Réglez les deux couleurs, l'épaisseur des rayures et leur angle, puis récupérez le fichier prêt à intégrer.

Comment utiliser ce motif comme fond CSS ?

Téléchargez le fichier SVG puis référencez-le en fond via background-image: url('motif-rayures.svg'), ou copiez le code SVG et encodez-le en data URI si vous préférez éviter une requête HTTP supplémentaire.

Le motif se répète-t-il automatiquement sur une grande surface ?

Oui : les rayures sont générées via un élément <pattern> SVG natif qui se répète en tuile sur toute la zone définie, quelle que soit la taille du rectangle choisie. Vous pouvez donc générer un petit motif et l'utiliser en background-repeat CSS si besoin.

Confidentialité : le SVG est entièrement construit dans votre navigateur, aucune donnée ni aucun réglage n'est envoyé à un serveur.