Générateur de motifs SVG : tuiles de fond sans raccord | We.Inc
Dix motifs SVG sans raccord pour vos arrière-plans : points, grille, vagues, hexagones et plus. Réglez taille, épaisseur de trait, couleurs, opacité et angle, puis copiez le CSS ou le SVG avec un élément pattern.
Choisissez l'une des dix formes de tuile, réglez la taille de la tuile, l'épaisseur du trait, les couleurs, l'opacité et l'angle, et obtenez un arrière-plan SVG sans raccord. Copiez-le sous forme de data URL pour background-image en CSS, qui se répète sur n'importe quel élément, ou sous forme de fichier SVG construit sur l'élément pattern pour l'utiliser dans une illustration, le tout dessiné et prévisualisé dans votre navigateur.
Tuile SVG ou motif en dégradé CSS ?
Besoin
Solution
Pourquoi
Courbes, hexagones, vagues, signes plus
Tuile SVG (cet outil)
Toute forme que SVG sait dessiner
Rayures, points, damiers simples
Dégradés CSS
Aucune image, voir le générateur d'arrière-plans CSS
Motif dans une illustration SVG
Élément <pattern>
Remplit n'importe quelle forme SVG
Les astuces à base de dégradés savent dessiner des rayures et des points, mais peinent avec les vagues, les hexagones et les contours. Une petite tuile SVG peut tout dessiner, reste nette à tous les niveaux de zoom et, en data URL, n'ajoute aucune requête à la page.
Choisissez un motif. L'aperçu remplit un grand panneau pour que vous puissiez juger la texture à taille réelle.
Ajustez la taille de la tuile et l'épaisseur du trait ou le rayon des points, puis choisissez la couleur de l'encre et celle du fond.
Baissez l'opacité de l'encre pour une texture discrète, et définissez un angle si vous voulez faire pivoter les tuiles.
Copiez le CSS pour un arrière-plan, le SVG d'une seule tuile, ou le SVG complet qui utilise un élément pattern.
Une texture de fond doit rester discrète. Une opacité d'encre entre 0.1 et 0.25 sur un fond teinté entre rarement en conflit avec le texte.
Alignez la taille de la tuile sur votre échelle d'espacement, par exemple 16, 24 ou 32 pixels, pour que les lignes tombent sur la grille de votre mise en page.
Quand vous faites pivoter un motif, l'outil passe à la forme avec élément pattern, car une tuile unique pivotée ne se raccorderait plus sans couture.
Placez les motifs sur un conteneur ou un pseudo-élément derrière le contenu pour pouvoir les modifier ou les retirer en un seul endroit.
Questions fréquentes
Pourquoi encoder # et < dans la data URL ?
Dans une URL, # ouvre un fragment et coupe l'image, et certains analyseurs rejettent les chevrons bruts. Les encoder en %23, %3C et %3E préserve le SVG. Les guillemets doubles deviennent des guillemets simples pour que la chaîne tienne dans url("...").
À quoi sert patternUnits="userSpaceOnUse" ?
Il mesure la largeur et la hauteur de la tuile dans les mêmes unités que le dessin : une tuile de 24 fait donc 24 pixels de large partout où elle est utilisée. La valeur par défaut, objectBoundingBox, dimensionne plutôt les tuiles en fractions de la forme remplie.
Puis-je utiliser le motif avec Tailwind ?
Oui. Ajoutez la règle CSS à votre feuille de style sous forme de classe, ou utilisez des valeurs arbitraires comme bg-[url(...)] avec la data URL. Une classe est plus lisible quand l'URL est longue.
Ces motifs sont-ils libres d'utilisation ?
Oui. Chaque tuile est dessinée à partir de formes simples par le code de cette page : le résultat vous appartient, sans mention requise.
Comment fonctionne une tuile sans raccord
Une tuile se répète bord à bord : tout ce qui sort par la droite doit revenir par la gauche. Le motif diagonal, par exemple, dessine de courts segments supplémentaires dans deux coins pour que les lignes se prolongent d'une tuile à l'autre sans interruption.
Les traits centrés sur le bord de la tuile, comme dans la grille, sont coupés en deux par la tuile. Deux tuiles voisines forment alors ensemble une seule ligne pleine largeur, ce qui explique pourquoi la grille paraît régulière.
Deux façons de l'utiliser
Pour un arrière-plan, la data URL en CSS est la plus simple : une seule règle, aucun fichier à héberger, et background-size contrôle l'échelle. Le navigateur décode la tuile une fois puis la répète.
Dans une illustration SVG, définissez un pattern dans defs et remplissez les formes avec url(#id). patternTransform permet de faire pivoter ou de redimensionner tout le motif sans le redessiner.
Attributs du motif SVG
Attributs de l'élément pattern utilisés par le générateur
Attribut
Valeur par défaut
Rôle
width / height
Taille d'une tuile ; une valeur de 0 ne dessine rien
patternUnits
objectBoundingBox
Unités pour x, y, width, height ; cet outil utilise userSpaceOnUse
patternContentUnits
userSpaceOnUse
Unités des formes à l'intérieur de la tuile
patternTransform
none (identité)
Fait pivoter, redimensionne ou incline tout le motif
Décale le point de départ de la première tuile
Motif en arrière-plan CSS
Texture d'hexagones en contour derrière une carte
Une tuile hexagonale de 28 pixels à mi-opacité. Modifiez background-size pour changer l'échelle de la texture.
La même tuile avec l'élément pattern
À utiliser dans une illustration SVG intégrée. N'importe quelle forme peut recevoir fill="url(#p)".
Pois
Papier quadrillé
Lignes diagonales
Signes plus
Zigzag
Vagues
Triangles
Damier
Anneaux
Hexagones
Générateur de motifs
Motifs : Pois, Papier quadrillé, Lignes diagonales, Signes plus, Zigzag, Vagues, Triangles, Damier, Anneaux, Hexagones. Réglez la taille, l'épaisseur du trait, les couleurs, l'opacité et l'angle, puis copiez le CSS ou le SVG.