Générateur de motifs de fond
Background Pattern Generator
Produit des motifs SVG raccordables — rayures, pois, quadrillages, grain — avec réglage des couleurs et de l’échelle.
Dessine un motif de fond sans raccord — pois, quadrillage, rayures, damier, croix, triangles ou vagues — et vous le rend en URI de données CSS, en fichier SVG, ou en fragment `<pattern>` à coller dans un document existant. La rotation est appliquée en `patternTransform`, si bien que la tuile reste sans raccord au lieu de casser sur ses propres bords.
Motif
Le motif le plus discret qui soit. Gardez le point sous un cinquième de la tuile, sinon il se lit comme une texture et non comme un motif.
Sortie
450 octets en URI encodé en URL contre 526 en Base64.
Encodé en URL plutôt qu’en Base64 — 14 % de moins ici, et toujours lisible dans la feuille de styles. L’encodeur de SVG en data URI fait la même chose pour n’importe quel SVG.
Comment s’en servir
Choisissez la forme
Chacune dit à quoi elle sert. Les pois sont les plus discrets ; un quadrillage est lisible derrière un schéma et distrayant derrière du texte ; les rayures diagonales sont le remplissage « travaux en cours » que tout le monde reconnaît.
Réglez la taille de tuile et l’épaisseur
L’épaisseur est une fraction de la tuile plutôt qu’une valeur en pixels, si bien que le motif garde son caractère quand vous redimensionnez la tuile. Au-delà d’environ un cinquième, la forme cesse de se lire comme un motif et se lit comme une texture.
Gardez le contraste bas
C’est la décision qui fait ou défait un fond. Un motif qui se voit est en général déjà trop fort : prenez un avant-plan à un ou deux pas du fond plutôt qu’une couleur contrastée, et vérifiez-le derrière du vrai texte avant de livrer.
Prenez le CSS, le fichier, ou le fragment
Le CSS est une URI de données encodée en URL, prête pour `background-image`. Le fichier SVG est pour les endroits où une URI ne convient pas. Le fragment `<pattern>` va dans un `<svg>` existant et se référence par `fill="url(#p)"`.
Questions fréquentes
Le motif se répétera-t-il sans raccord ?
Oui, et c’est là que la géométrie travaille. Les rayures diagonales sont dessinées en trois copies enroulées pour que la diagonale se poursuive par-dessus le bord de la tuile, et la vague est faite de deux segments cubiques accordés en pente à la jonction. La rotation passe par `patternTransform` pour la même raison : tourner la géométrie à l’intérieur de la tuile laisserait des bouts coupés à la frontière.
Puis-je exporter un PNG ?
Pas ici. La sortie est du SVG en trois emballages, indépendant de la résolution et bien plus léger — un motif de pois fait quelques centaines d’octets en URI de données et ferait quelques kilooctets en tuile PNG. Si un fichier matriciel est exigé, téléchargez le SVG et rastérisez-le.
Un motif de fond nuit-il aux performances ?
Rarement, mais il existe un cas réel : une tuile très petite sur une très grande surface fait répéter la tuile un très grand nombre de fois au compositeur, et sur un téléphone d’entrée de gamme cela se voit au défilement. Si une page paraît lourde avec un motif dessus, essayez une tuile plus grande à densité apparente égale.
Puis-je employer un motif en texture par-dessus une image ?
Oui : activez le fond transparent et la tuile ne porte plus que les formes d’avant-plan, donc ce qui est derrière transparaît. Empilez-la en seconde couche de `background-image` au-dessus de la photo.
À alimenter depuis
Générateur de dégradé CSS
CSS Gradient Builder
Compose des dégradés linéaires, radiaux et coniques avec des arrêts déplaçables et rend le CSS, en sRGB ou en OKLCH.
Générateur de carte sociale
Social Card Generator
Compose une image de partage de 1200×630 à partir d’un titre, d’un sous-titre, d’une ligne de marque et d’un logo facultatif sur un modèle au choix, et écrit les balises meta qui vont avec.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Générateur de dégradé CSS
CSS Gradient Builder
Compose des dégradés linéaires, radiaux et coniques avec des arrêts déplaçables et rend le CSS, en sRGB ou en OKLCH.
Générateur de carte sociale
Social Card Generator
Compose une image de partage de 1200×630 à partir d’un titre, d’un sous-titre, d’une ligne de marque et d’un logo facultatif sur un modèle au choix, et écrit les balises meta qui vont avec.
SVG en data URI CSS
SVG to CSS Data URI
Encode un SVG en data URI de fond CSS, en n’échappant que ce qui doit l’être pour rester court.
Optimiseur SVG
SVG Optimiser
Retire les restes d’éditeur, aplatit les transformations et arrondit la précision des tracés, en montrant le rendu avant et après.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.