Seamless Pattern Maker: Tuiles et Répétitions

Qu'est-ce que le Seamless Pattern Maker ?

Le Seamless Pattern Maker prend une seule image-tuile et la rend sur un canevas configurable pour prévisualiser et exporter un motif de carrelage sans couture. Vous contrôlez l'échelle, la rotation, l'espacement et choisissez parmi quatre modes de tuile — grille normale, décalage demi-brique, diagonal et miroir — pour voir exactement comment la tuile se présentera lorsqu'elle sera répétée. Une fois satisfait, exportez le résultat sous forme d'une grande image PNG ou copiez un fragment CSS background-image prêt à coller. Tout le traitement s'effectue localement dans votre navigateur sans aucun téléversement de fichier vers un serveur.

Fonctionnalités principales

• Téléverser une tuile par glisser-déposer ou clic : La zone de téléversement accepte le glisser-déposer et le clic pour parcourir. Les fichiers de plus de 10 Mo sont rejetés avec un message d'erreur. Les dimensions de la tuile chargée s'affichent sous la miniature d'aperçu.
• Aperçu en temps réel : Chaque fois que vous ajustez un paramètre, le canevas se redessine immédiatement. Le canevas rend suffisamment de tuiles pour remplir toute la zone d'aperçu, y compris des tuiles supplémentaires en marge pour compenser le débordement dû à la rotation.
• Échelle ajustable (5 % à 400 %) : Un curseur par incréments de 5 % redimensionne la tuile vers le haut ou vers le bas par rapport à ses dimensions en pixels d'origine. À 100 %, la tuile s'affiche à sa taille native.
• Contrôle de rotation (0 à 360 degrés) : Fait pivoter chaque tuile autour de son point central avant de la dessiner. Fonctionne avec n'importe quel mode de tuile.
• Espacement entre les tuiles : Un curseur de -50 à 50 px contrôle l'espacement. Les valeurs positives ajoutent de l'espace entre les tuiles rempli avec la couleur d'arrière-plan ; les valeurs négatives font se chevaucher les tuiles pour des effets de superposition.
• Quatre modes de tuile : Normal — grille standard sans décalage. Demi-brique — les rangées alternées sont décalées de la moitié de la largeur d'une tuile, comme dans la maçonnerie. Demi-descente — les colonnes alternées sont décalées de la moitié de la hauteur d'une tuile, produisant un motif d'échelonnement vertical. Miroir — les colonnes alternées sont retournées horizontalement et les rangées alternées sont retournées verticalement, créant une symétrie de type kaléidoscope.
• Taille de canevas configurable : Les champs de largeur et de hauteur acceptent 100–4096 pixels. Le canevas d'aperçu et le PNG exporté utilisent ces dimensions exactes.
• Exporter en PNG : Télécharge le canevas rendu sous le nom pattern-[largeur]x[hauteur].png.
• Copier le fragment CSS d'arrière-plan : Génère un canevas d'une seule tuile et copie trois propriétés CSS dans le presse-papiers : background-image, background-repeat et background-size.

Comment utiliser le Seamless Pattern Maker

Étape 1 : Téléverser votre image-tuile

Faites glisser un fichier image sur la zone de téléversement ou cliquez pour parcourir les fichiers. Tout format d'image nativement pris en charge par votre navigateur est accepté. Les dimensions de la tuile s'affichent sous la miniature — par exemple, « 64 x 64px ». Si vous téléversez un fichier de plus de 10 Mo, l'outil affiche l'erreur « Fichier trop volumineux » et le rejette. Après un téléversement réussi, le canevas d'aperçu rend immédiatement le motif de tuile avec les paramètres par défaut.

Les bonnes images-tuiles sont celles qui se répètent naturellement sans coutures visibles — textures de tuiles sans couture, motifs d'icônes, formes géométriques ou images que vous avez intentionnellement conçues pour se répéter. Les motifs réguliers comme les chevrons, les points ou les tissus fonctionnent particulièrement bien.

Étape 2 : Sélectionner un mode de tuile

Quatre boutons de mode apparaissent dans la section Contrôles :

• Normal : Grille standard, toutes les tuiles alignées en rangées et colonnes.
• Demi-brique : Les rangées impaires sont décalées vers la droite de la moitié d'un pas de tuile (espacement compris), exactement comme un mur de briques standard.
• Demi-descente : Les colonnes impaires sont décalées vers le bas de la moitié d'un pas de tuile, créant un effet d'échelonnement vertical souvent présent dans le papier peint et les motifs de tissu.
• Miroir : Chaque colonne alternée est retournée horizontalement (ctx.scale(-1, 1)) et chaque rangée alternée est retournée verticalement (ctx.scale(1, -1)), créant des réflexions symétriques à travers les limites des tuiles.

Cliquez sur chaque mode pour voir l'effet immédiatement sur le canevas.

Étape 3 : Ajuster l'échelle, la rotation et l'espacement

Trois curseurs affinent le carrelage :

• Échelle (5 %–400 %) : À 100 %, la tuile est rendue à sa taille en pixels naturelle. Augmentez à 200 % pour rendre la tuile grande et le motif plus visible ; diminuez à 50 % pour un micro-motif dense.
• Rotation (0°–360°) : Faites pivoter les tuiles pour créer des effets de rayures diagonales ou ajouter du dynamisme à un motif. Une rotation de 45° d'une tuile rayée crée un motif de rayures diagonales.
• Espacement (-50 à 50 px) : Les valeurs positives ajoutent de l'espace entre les tuiles rempli de la couleur d'arrière-plan. Les valeurs négatives chevauchent les tuiles adjacentes pour des effets de superposition.

Étape 4 : Configurer la taille du canevas et la couleur d'arrière-plan

Saisissez la largeur et la hauteur du canevas de sortie (100–4096 px chacune) dans les deux champs numériques. L'aperçu en direct s'adapte à votre écran, mais le canevas réel est rendu dans les dimensions spécifiées. Pour un test de fond CSS, 800×600 est suffisant. Pour une exportation prête à imprimer, utilisez 2400×2400 ou plus.

Cliquez sur l'échantillon de couleur d'arrière-plan pour choisir la couleur de remplissage entre et autour des tuiles.

Étape 5 : Exporter en PNG ou copier le CSS

Cliquez sur le bouton PNG pour télécharger le canevas rendu sous le nom pattern-[largeur]x[hauteur].png. Utilisez cette image comme texture dans un logiciel de conception, des moteurs de jeu ou comme élément <img>.

Cliquez sur CSS pour copier un fragment CSS prêt à l'emploi dans le presse-papiers. Le fragment rend une seule tuile sur un canevas séparé et l'encode sous forme d'URI de données base64. Les trois propriétés copiées sont :

background-image: url("data:image/png;base64,...");
background-repeat: repeat;
background-size: 72px 72px;

Les valeurs de background-size correspondent à la largeur de tuile mise à l'échelle plus l'espacement et à la hauteur de tuile mise à l'échelle plus l'espacement. Collez ceci directement dans votre feuille de style.

Exemples pratiques

Fond en briques pour un site web

Téléversez une texture de brique 128×64. Sélectionnez le mode « Demi-brique », réglez l'échelle à 100 %, l'espacement à 2 px et la couleur d'arrière-plan sur #2c1810 (marron mortier foncé). Réglez le canevas sur 800×600. L'aperçu affiche un motif de briques réaliste. Copiez le fragment CSS et collez-le dans une règle CSS .hero-section.

Motif de rayures en demi-descente pour une bannière

Téléversez une tuile de rayures 40×40 (une rayure diagonale unicolore sur fond transparent, enregistrée en PNG). Sélectionnez « Demi-descente », échelle à 150 %, rotation à 45°, espacement à 0 px. Les rayures se combinent avec le décalage en demi-descente pour créer un motif de rayures dense et échelonné. Exportez en PNG 1200×400 pour l'utiliser comme fond de bannière.

Tuile kaléidoscope pour un design imprimé

Téléversez une tuile géométrique 100×100 avec un motif coloré dans un quadrant. Sélectionnez « Miroir », échelle 100 %, rotation 0°, espacement 0 px. Le mode miroir reflète la tuile horizontalement et verticalement dans une unité de répétition 2×2. Exportez à 2400×2400 pour un motif haute résolution prêt à imprimer.

Motif de fond CSS pour un composant de carte

Téléversez une petite tuile de texture à points (PNG 32×32). Sélectionnez « Normal », échelle à 75 %, espacement 6 px, fond #f8f8f8. Canevas 400×400. Copiez le fragment CSS. Dans votre feuille de style :

.card-background {
  background-image: url("data:image/png;base64,...");
  background-repeat: repeat;
  background-size: 30px 30px;
}

Les points se répètent sans couture sur toute la carte quelle que soit sa taille.

Conseils et bonnes pratiques

Utilisez des tuiles spécifiquement conçues pour être sans couture. L'outil rend la tuile que vous fournissez ; il ne rend pas automatiquement les tuiles sans couture sur leurs bords. Si votre tuile a un contenu qui ne correspond pas à ses bordures, vous verrez des lignes de couture visibles.

Le mode miroir élimine la répétition visible. Même les tuiles non sans couture semblent souvent acceptables en mode miroir car les réflexions dissimulent les bords. Essayez d'abord le mode miroir si votre tuile n'a pas été conçue pour se répéter.

La rotation ajoute des tuiles de marge au canevas. L'outil calcule une marge égale à 2 × Math.max(largeurTuile, hauteurTuile) et rend des tuiles au-delà des limites du canevas pour remplir les vides causés par la rotation.

Le fragment CSS utilise une URL de données d'une seule tuile. L'export CSS crée un nouveau canevas de taille (largeurTuile + espacement) × (hauteurTuile + espacement) pour le fragment. Cela maintient l'URL de données petite et laisse le navigateur gérer le carrelage infini nativement via background-repeat: repeat.

Les paramètres sont partageables via URL. L'outil utilise useShareableState pour encoder vos paramètres actuels dans l'URL. Partagez l'URL avec un collaborateur et il verra votre configuration exacte.

Le contrôle d'espacement va de -50 à 50 px. Pour des effets de jointement, un espacement positif de 3 à 8 px avec une couleur d'arrière-plan contrastante est typiquement réaliste.

Problèmes courants et dépannage

Erreur « Fichier trop volumineux » : L'outil rejette les fichiers de plus de 10 Mo. Compressez votre image-tuile à moins de 10 Mo avant de la téléverser.

Erreur « Format invalide » : L'outil nécessite un fichier image valide (file.type.startsWith('image/')). Les fichiers non image seront rejetés.

Le motif affiche des lignes de couture visibles : Les bords de la tuile ne correspondent pas. L'outil rend la tuile que vous fournissez. Pour un résultat sans couture, utilisez une image spécifiquement conçue pour se répéter sans bords visibles. Le mode miroir peut partiellement dissimuler les bords non sans couture.

Le canevas apparaît vide après le téléversement : L'aperçu en direct ne s'affiche que lorsqu'une image-tuile est chargée. Si le téléversement a réussi (la miniature est visible) mais le canevas est vide, essayez d'effacer et de re-téléverser.

Toast « Aucune image chargée » lors de l'exportation : Cliquez sur PNG ou CSS sans image chargée. Téléversez d'abord une image-tuile.

Le fragment CSS a une très grande URL de données : Le canevas d'une seule tuile est dimensionné proportionnellement à votre paramètre d'échelle. Pour le CSS de production, il est préférable d'enregistrer la tuile comme un fichier image séparé et de le référencer avec une URL normale.

Confidentialité et sécurité

Le Seamless Pattern Maker traite toutes les images entièrement dans votre navigateur. Les images-tuiles sont chargées via l'API FileReader et stockées en tant que données en mémoire. Toutes les opérations de canevas (dessin, mise à l'échelle, rotation, mise en miroir) utilisent l'API Canvas 2D du navigateur sans communication avec le serveur. L'export CSS ne copie les données que dans votre presse-papiers local. L'outil fonctionne hors ligne après le premier chargement de la page.

Foire aux questions

Le Seamless Pattern Maker est-il gratuit ? Oui, entièrement gratuit. Les quatre modes de tuile, tous les contrôles, l'export PNG et la copie CSS sont disponibles sans frais et sans compte requis.

Le Seamless Pattern Maker fonctionne-t-il hors ligne ? Oui. Après le chargement initial de la page, tout le rendu utilise l'API Canvas 2D dans votre navigateur. Aucune requête réseau n'est effectuée pendant la création ou l'export de motifs.

Mes données sont-elles en sécurité avec le Seamless Pattern Maker ? Vos images-tuiles ne quittent jamais votre appareil. L'API FileReader les charge dans la mémoire locale du navigateur, et tout le traitement et l'export sont effectués côté client.

Quels formats d'image puis-je utiliser comme tuiles ? Tout format d'image nativement pris en charge par votre navigateur : JPEG, PNG, WebP, GIF, SVG (comme élément image) et sur les navigateurs récents, AVIF et HEIC. Les GIFs animés n'utiliseront que la première image.

Quelle est la taille maximale du fichier de tuile ? L'outil impose une limite de taille de fichier de 10 Mo. Les fichiers de plus de 10 Mo déclencheront l'erreur « Fichier trop volumineux » et seront rejetés.

Comment fonctionne le mode de tuile demi-brique ? En mode demi-brique, chaque rangée impaire (indice de rangée % 2 === 1) décale sa position X de départ vers la droite par pasX / 2. Cela crée le classique appareillage en briques où les joints horizontaux sont décalés.

Comment fonctionne le mode de tuile miroir ? La mise en miroir est appliquée par tuile pendant le rendu du canevas. Pour chaque tuile, l'outil vérifie si son indice de colonne est impair (retourner horizontalement) et si son indice de rangée est impair (retourner verticalement). Il applique ctx.scale(-1, 1) et/ou ctx.scale(1, -1) avant de dessiner la tuile, puis restaure l'état du canevas.

Puis-je utiliser le fragment CSS en production ? Vous pouvez, mais pour une utilisation en production, un fichier image séparé est généralement préférable. Les URL de données intégrées dans le CSS ne peuvent pas être mises en cache indépendamment par le navigateur, augmentent la taille de la feuille de style et sont difficiles à mettre à jour.

Comment la rotation affecte-t-elle la grille de tuiles ? La rotation est appliquée à chaque tuile individuellement en utilisant ctx.save(), ctx.translate(), ctx.rotate() et ctx.restore(). La grille de tuiles elle-même n'est pas pivotée — seule l'image de la tuile dans chaque position est pivotée.

Puis-je enregistrer les paramètres de mon motif ? Oui. Les paramètres sont automatiquement encodés dans l'URL via useShareableState, de sorte qu'ajouter l'URL aux favoris ou la partager préserve votre configuration actuelle. Les supporters premium peuvent également enregistrer des préréglages nommés.

Outils associés

• Bientôt disponible: SVG Pattern Generator — Créer des motifs vectoriels évolutifs de manière programmatique sans avoir besoin d'une image-tuile source.
• Bientôt disponible: Placeholder Generator — Générer des images de remplacement unicolores à utiliser comme entrées de tuile rapides pour tester le créateur de motifs.
• Bientôt disponible: Noise Texture — Générer des textures de bruit procédurales qui fonctionnent bien comme entrées de tuile sans couture.
• Bientôt disponible: Image Effects — Appliquer des filtres à votre image-tuile avant de l'utiliser comme entrée pour le créateur de motifs.

Essayez le Seamless Pattern Maker maintenant : Glyph Widgets Seamless Pattern Maker