Générateur de motifs CSS

La plupart des outils de génération de motifs réutilisent discrètement la même formule repeating-linear-gradient pour chaque option en ne changeant que les chiffres. Celui-ci ne le fait pas : chacun des six types de motifs est construit avec la technique CSS qui produit réellement cette forme. Les rayures utilisent un seul repeating-linear-gradient avec deux bandes de couleur. Les pois utilisent un radial-gradient pavé uniquement grâce à background-size — l’astuce CSS classique des pois — plutôt qu’un repeating-radial-gradient, qui ne peut pas paver un point circulaire proprement sur une grille rectangulaire. Le damier utilise la véritable formule conic-gradient à quatre quadrants : un dégradé conique centré dans un carreau carré se divise naturellement en quatre carrés de quadrant à des limites de 90 degrés, et l’alternance de deux couleurs sur ces quadrants pave un véritable damier, pas une approximation.

La grille et le croisillon diagonal superposent tous deux deux repeating-linear-gradients en tant qu’entrées background-image distinctes plutôt que de simuler la seconde direction avec des astuces de bordure. La grille combine un « vers la droite » et un « vers le bas » en gradients répétés pour des lignes de règle horizontales et verticales nettes. Le croisillon superpose un gradient répété à +45° et un autre à -45° pour un tissage diagonal de type panier — soyons précis : c’est un croisillon authentique, pas un véritable motif à chevrons, et l’outil le nomme ainsi sans exagérer. Les triangles réutilisent la technique conic-gradient à quatre coins du damier mais en faisant pivoter le dégradé de 45 degrés, ce qui déplace les limites des coins du milieu des bords du carreau vers ses angles et transforme les quatre coins en quatre triangles de coin à coin au lieu de quatre carrés de quadrant.

Chaque type de motif expose uniquement les réglages qui s’appliquent réellement à lui — un curseur d’angle apparaît pour les rayures, le rayon des pois et l’espacement pour les pois, l’épaisseur de trait pour la grille et le croisillon — et la grande zone d’aperçu pavée se rafraîchit à chaque modification afin que l’on puisse voir plusieurs répétitions complètes avant de valider une valeur. Basculez le mode de sortie sur SVG et le même motif réapparaît en tant qu’élément <pattern> construit à partir de primitives simples rect, circle, path ou polygon, prêt à être collé dans les <defs> de n’importe quel document SVG, avec un téléchargement en un clic pour un fichier .svg autonome.

Tout s’exécute localement dans votre navigateur : pas d’envoi d’images, pas d’aller-retour serveur, pas de compte. Pour les remplissages unis ou dégradés sans répétition, le générateur de dégradés CSS de ce site est l’outil approprié à la place ; celui-ci est spécifiquement destiné aux arrière-plans géométriques pavables créés sans la moindre image.