à quoi il sert
Ce que fait Pattern Generator.
Pattern Generator crée des arrière-plans géométriques en mosaïque à partir de SVG inline. Choisissez un motif — points, rayures, grilles, chevrons et plus — puis définissez les couleurs de premier plan et d'arrière-plan, l'échelle de la tuile et l'opacité.
L'aperçu se met à jour en direct pendant que vous ajustez les contrôles. Lorsque le rendu vous convient, exportez au format adapté à votre flux de travail : un extrait CSS background, une tuile SVG autonome ou un PNG 1600×900.
flux de travail
Choisir, personnaliser et exporter en quatre étapes.
- Ouvrez Pattern Generator et cliquez sur une tuile de motif dans le sélecteur.
- Ajustez les couleurs de premier plan et d'arrière-plan, l'échelle et l'opacité jusqu'à ce que l'aperçu corresponde à votre marque ou à votre mise en page.
- Cliquez sur Copy CSS pour obtenir une propriété background prête à coller, ou utilisez Download SVG / Download PNG pour des fichiers d'assets.
- Insérez le résultat dans la feuille de style de votre page, votre fichier Figma ou votre présentation — sans compte et sans téléversement.
css
Coller du CSS dans une page.
Le CSS copié est une seule déclaration background avec un data URI SVG inline. Collez-la dans une règle de classe ou un style inline sur l'élément qui doit afficher le motif :
Example: ajoutez la ligne copiée à .hero { … } ou à une classe utilitaire dans votre feuille de style. Le SVG se répète sans couture, il fonctionne donc sur des sections pleine largeur, des cartes et des blocs hero sans markup supplémentaire.
Comme le motif est intégré en data URI, il n'y a pas de fichier image séparé à héberger. Cela simplifie le déploiement — un collage CSS et c'est terminé.
figma
Utiliser la tuile SVG comme remplissage Figma.
Téléchargez la tuile SVG et faites-la glisser dans votre fichier Figma, ou utilisez Place image pour l'importer. Sélectionnez un frame ou une forme, puis définissez le type de remplissage sur Image et choisissez le SVG importé.
Réglez le mode de remplissage sur Tile pour que la répétition géométrique corresponde à l'aperçu de l'outil. Ajustez l'échelle dans Figma si vous avez besoin d'une répétition plus serrée ou plus lâche que la taille de tuile par défaut.
Cette approche est utile lorsque vous voulez le même motif dans une maquette et en CSS de production — exportez une fois depuis Pattern Generator, utilisez le SVG dans Figma et le CSS sur la page en ligne.
png
PNG pour les diapositives et les images OG.
Download PNG exporte un raster 1600×900 du motif actuel avec vos réglages de couleur et d'échelle. Utilisez-le comme arrière-plan de diapositive dans Keynote, Google Slides ou PowerPoint, ou comme image d'aperçu social lorsque vous avez besoin d'un asset plat plutôt que de CSS en direct.
Le PNG est aussi pratique pour les outils qui ne prennent pas en charge les remplissages SVG ou les arrière-plans en data URI — modèles d'e-mail, exports PDF et générateurs de vignettes exigent souvent un seul fichier image.
confidentialité
Uniquement dans le navigateur.
Pattern Generator s'exécute entièrement dans votre navigateur. Les couleurs, l'échelle et les exports sont calculés sur votre appareil — rien n'est téléversé vers Tiny Design Shop ni vers un serveur tiers. Fermez l'onglet et votre session disparaît.