Générateur de modèles SVG

Le générateur de motifs SVG crée des arrière-pls en mosaïque répétés en définissant un élément SVG <pattern> rempli avec une seule forme répétée. Il propose six types de formes (cercles, carrés, triangles, lignes, croix, losanges) dessinés comme des primitives de contour, puis les dispose en mosaïque sur un aperçu 200x200 et exporte le balisage SVG complet pour une utilisation dans des pages web, des arrière-plans CSS ou des fichiers de conception.

1. Choisissez un Type de motif parmi les six options de boutons. 2. Ajustez le curseur Taille (de 10 à 60px) pour définir à la fois les dimensions de la tuile et l'échelle de la forme. 3. Ajustez le curseur Épaisseur du trait (de 0,5 à 6,0). 4. Utilisez Rotation (de 0 à 360 degrés, par incréments de 5 degrés) pour faire pivoter la tuile via patternTransform. 5. Définissez la Couleur de la forme et la Couleur d'arrière-plan à l'aide des deux échantillons de couleur. 6. Cliquez sur Copier pour copier le SVG généré dans le presse-papiers.

Le SVG exporté est au format 200x200 avec un bloc <defs><pattern> utilisant patternUnits="userSpaceOnUse". La largeur et la hauteur du motif sont égales à la valeur de Taille, de sorte que chaque tuile se répète sur une grille de cette taille. Un <rect> d'arrière-plan rempli avec la Couleur d'arrière-plan est d'abord dessiné, puis un second <rect> rempli avec url(#pat) superpose les tuiles. Lorsque la Rotation est non nulle, la rotation est appliquée à la fois comme patternTransform sur le motif et comme transformation rotate() sur la forme elle-même.