Générateur de fond de motif CSS

La plupart des outils de « générateur de motifs » réutilisent discrètement la même formule de dégradé linéaire répétitif pour chaque option et modifient simplement les nombres. Ce n'est pas le cas de celui-ci : chacun des six types de motifs ici est construit à partir de la technique CSS spécifique qui produit réellement cette forme. Les rayures utilisent un seul dégradé linéaire répétitif avec deux bandes de couleur. Les points utilisent un dégradé radial carrelé uniquement en fonction de la taille de l'arrière-plan - l'astuce classique des points CSS - plutôt qu'un dégradé radial répétitif, qui ne peut pas carreler proprement un point circulaire sur une grille rectangulaire. Checkerboard utilise la véritable formule de dégradé conique à quatre quadrants : un dégradé conique centré dans une tuile carrée se divise naturellement en quatre carrés de quadrant à des limites de 90 degrés, et alterne deux couleurs sur ces tuiles de quadrants pour former un véritable damier, pas une approximation.

La grille et les hachures diagonales superposent toutes deux deux dégradés linéaires répétitifs en tant qu'entrées d'image d'arrière-plan distinctes plutôt que de simuler la deuxième direction avec des astuces de bordure. La grille combine un dégradé répétitif « vers la droite » et « vers le bas » pour des lignes de règle horizontales et verticales nettes. Crosshatch superpose un dégradé répétitif de +45 degrés et -45 degrés pour un tissage diagonal de style basketweave - ce qui mérite d'être précis : il s'agit d'un hachurage honnête, pas d'une véritable géométrie à chevrons, et l'outil l'étiquette de cette façon plutôt que de trop revendiquer. Les triangles réutilisent la technique du dégradé conique à quatre coins du damier, mais démarrent le dégradé avec une rotation de 45 degrés, ce qui déplace les limites des coins du milieu du bord de la tuile vers ses coins et transforme les quatre mêmes coins en quatre triangles d'un coin à l'autre au lieu de quatre carrés de quadrant.

Chaque type de motif expose uniquement les commandes qui s'y appliquent réellement : un curseur d'angle apparaît pour les rayures, le rayon et l'espacement des points s'affichent pour les points, l'épaisseur de la ligne s'affiche pour la grille et les hachures - et la grande boîte d'aperçu en mosaïque est repeinte à chaque modification afin que vous puissiez voir plusieurs répétitions complètes avant de vous engager sur une valeur. Basculez le mode de sortie en SVG et le même motif réapparaît sous la forme d'un élément <pattern> construit à partir de primitives simples de rect, de cercle, de chemin ou de polygone, prêt à être collé dans le <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 de téléchargement d'images, pas d'aller-retour sur le serveur, pas de compte. Pour les remplissages unis ou dégradés sans répétition, le générateur de dégradé CSS sur ce site est le bon outil ; celui-ci est spécifiquement destiné aux arrière-plans géométriques carrelables construits à partir de zéro image.