Softonic

Générateur de motifs de points SVG

Étape 1 / 3
Suivant

Les motifs de points sont le cheval de bataille discret des arrière-plans web modernes, pensez à la grille de points subtile derrière une page Notion, aux pois dans une section héro ou à la texture semblable à du grain sur une carte. Ce générateur crée un seul SVG en utilisant une définition <pattern> en ligne, de sorte que le fichier reste minuscule (généralement moins de 500 octets) et se répète parfaitement à n’importe quelle taille. Vous contrôlez la toile, l’espacement entre les points, le rayon, la couleur des points et l’arrière-plan.

Comment créer un motif de points

  1. 1

    Définir la toile

    Largeur et hauteur en pixels. Pour les arrière-plans CSS, cela peut rester petit (par exemple 800×600) et être répété.

  2. 2

    Choisir l'espacement

    Distance entre les centres des points voisins. 20-40 px a l'air propre ; 10 px devient bruyant.

  3. 3

    Définir le rayon des points

    1-3 px pour une texture subtile, 4-8 px pour des pois délibérés.

  4. 4

    Choisir les couleurs

    Remplissage des points (premier plan) et arrière-plan de la toile. Définissez l'arrière-plan sur `transparent` pour un motif de superposition réel.

  5. 5

    Copier le SVG

    Collez dans votre HTML ou utilisez `background-image: url("data:image/svg+xml,...")` dans CSS.

Comment le motif est défini

Le générateur produit un élément <pattern> à l’intérieur de <defs> et remplit un <rect> de toile complète avec fill="url(#dots)":

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" fixe la taille du motif en pixels, donc le redimensionnement du SVG parent ne déforme pas les points.

Feuille de triche pour le réglage des motifs

Apparence Espacement Rayon Contraste
Chuchotement (à peine visible) 30-40 1-1.5 5-10% d’opacité
Arrière-plan subtil 25-30 2 15-20% d’opacité
Motif de points honnête 20 2-3 Couleur pleine
Pois délibérés 40-60 8-15 Couleur pleine
Effet de demi-teinte 10 1 Remplissage dégradé

Utilisation comme arrière-plan CSS

Encodez le SVG en tant qu’URL de données et appliquez-le à n’importe quel élément :

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

Répéter le SVG par CSS est plus rapide que d’envoyer un PNG, le navigateur le rasterise à la taille d’affichage finale, donc il reste net sur chaque DPR (affichages 1x, 2x, 3x).

Quand les points nuisent à la lisibilité

Un motif de points directement derrière le texte peut créer un moiré scintillant contre un texte fin. Si vous devez mettre du texte par-dessus, soit :

  • Augmentez l’espacement à 40+ px pour que les points tombent entre les lignes, ou
  • Diminuez l’opacité du motif en dessous de 10%, ou
  • Mettez le texte à l’intérieur d’une carte solide au-dessus du motif.

Questions fréquentes

Définissez la couleur de fond sur transparent, alors la seule peinture est les points eux-mêmes. Placez le SVG sur la couleur ou l’image que vous souhaitez faire apparaître.

Pas avec ce générateur, il produit une grille carrée. Pour une disposition hexagonale, vous avez besoin d’un carreau de motif qui est sqrt(3) fois plus haut qu’il n’est large, avec deux cercles par carreau décalés de moitié. Envisagez le constructeur de chemin SVG ou un générateur hex dédié.

Le SVG lui-même est net à n’importe quelle taille, mais si vous le rasterisez à une résolution inférieure à celle du carreau de motif, vous obtiendrez un aliasing. Exportez à 2x ou 3x votre taille d’affichage prévue.

Remplacez fill="#hex" sur le cercle par fill="url(#gradient-id)" et ajoutez une définition <linearGradient> à l’intérieur du même <defs>. Chaque point sera alors rendu avec ce dégradé, ce qui peut être coûteux si la toile a des milliers de points.

L’éditeur standard envoie la toile, l’espacement, le rayon et les couleurs au serveur pour afficher l’aperçu. Dans le parcours guidé, ces réglages apparaissent aussi dans l’URL. N’y saisissez pas d’informations sensibles : l’outil n’enregistre pas de projet de motif réutilisable.

Outils similaires

Sélecteur de couleurs Material Design

Parcourez la palette de couleurs Material Design. Copiez n'importe quelle teinte (50 à A700) en HEX, RGB ou HSL d'un simple clic.

Générateur de papier ligné

Créez gratuitement du papier ligné imprimable. Choisissez une réglure standard, large ou étroite, définissez l'interligne en mm, le format de page et une ligne de marge, puis imprimez ou téléchargez le SVG.

Convertisseur Pantone en HEX

Convertissez les couleurs Pantone PMS en valeurs HEX, RGB et CMYK les plus proches pour une correspondance à l'écran et à l'impression, avec un aperçu des échantillons.

Créateur d’avatar

Créez un avatar illustré plat dans votre navigateur. Choisissez le teint, les cheveux, les yeux, la bouche, la tenue, le fond et un nom d’affichage facultatif, puis téléchargez un SVG ou PNG.

Générateur de maquettes d'écran

Déposez une capture d'écran dans un cadre de fenêtre de navigateur ou de macOS avec un arrière-plan en dégradé, de la marge et une ombre pour des publications sociales, des diapositives et des kits de presse soignés. Exporte en PNG dans votre navigateur.

Générateur de graffitis

Créez un texte façon graffiti avec des effets tag, bulle, bloc, pochoir, néon et wildstyle. Réglez les couleurs et exportez-le en PNG ou SVG.

Outil disponible dans d’autres langues