Générateur de motifs SVG (carreaux géométriques)

Générateur de motifs SVG

Créez des motifs de tuiles géométriques sans couture avec aperçu en direct. Choisissez parmi 12 types de motifs — points, lignes, grilles, hexagones, chevrons, triangles, et plus encore — personnalisez les couleurs, la taille, l'espacement et la rotation, puis exportez en code SVG, arrière-plan CSS ou fichier SVG téléchargeable. Le tout s'exécute dans votre navigateur avec un retour visuel instantané.

Comment utiliser

Sélectionnez un type de motif dans le menu déroulant, puis ajustez les commandes pour personnaliser votre conception. L'aperçu se met à jour en temps réel lorsque vous modifiez les couleurs, la taille, l'espacement, la largeur du trait, l'opacité et la rotation. Lorsque vous êtes satisfait du résultat, utilisez les boutons d'exportation pour copier le code SVG, copier le balisage d'arrière-plan CSS, télécharger le fichier SVG ou simplement copier la définition du motif pour l'intégrer dans des SVG existants.

Caractéristiques

• 12 types de motifs — Points, lignes horizontales, lignes verticales, lignes diagonales, grille, chevron/zigzag, hexagones, triangles, losanges, croix, ondes et damier. Chacun se répète sans couture.
• Aperçu en direct — Grande zone d'aperçu visuel montrant votre motif répété en temps réel. Chaque changement est reflété instantanément — aucune attente, aucun bouton de génération.
• Personnalisation des couleurs — Sélecteurs de couleur pour les couleurs de premier plan et d'arrière-plan. Créez n'importe quelle combinaison de couleurs pour votre motif.
• Commandes de taille et d'espacement — Curseurs pour l'échelle du motif (10-100px), la largeur du trait (1-20px) et l'espacement (5-100px). Ajustez finement la densité et l'épaisseur de votre motif.
• Opacité et rotation — Ajustez l'opacité du motif (0,1-1,0) et la rotation (0-360°) pour des variations créatives et des effets de superposition.
• Exporter en code SVG — Copiez le balisage SVG complet avec le motif intégré, prêt à être collé dans n'importe quel projet.
• Exporter en arrière-plan CSS — Copiez une propriété CSS background-image avec un Data URI — collez-la directement dans votre feuille de style pour des arrière-plans de motifs sans couture.
• Télécharger le fichier SVG — Téléchargez le motif sous forme de fichier .svg pour une utilisation dans des outils de conception (Figma, Illustrator, Sketch).
• Copier la définition du motif — Copiez uniquement l'élément SVG pour l'intégrer dans des documents SVG existants.

Types de motifs

Points : Cercles disposés en grille régulière. Motif pois classique.
Lignes : Lignes parallèles horizontales, verticales ou diagonales. Épuré et minimaliste.
Grille : Lignes perpendiculaires formant une grille de papier millimétré.
Chevron/Zigzag : Motif répétitif en forme de V. Idéal pour les arrière-plans dynamiques.
Hexagones : Tessellation en nid d'abeille. Mathématique et organique.
Triangles : Grille de triangles répétitifs. Géométrique et moderne.
Losanges : Carrés tournés créant des formes de losanges. Élégant et classique.
Croix : Signes plus disposés en grille. Net et structuré.
Ondes : Lignes sinusoïdales courbes. Organique et fluide.
Damier : Carrés alternés remplis et vides. Audacieux et emblématique.