Generatore di pattern SVG

Il generatore di pattern SVG crea sfondi a piastrelle ripetuti definendo un elemento SVG <pattern> riempito con una singola forma ripetuta. Offre sei tipi di forme (cerchi, quadrati, triangoli, linee, croci, rombi) disegnate come primitive di contorno, quindi li affianca su un'anteprima 200x200 ed esporta il markup SVG completo per l'uso in pagine web, sfondi CSS o file di progettazione.

1. Scegli un tipo di pattern tra le sei opzioni a pulsante. 2. Regola lo slider delle Dimensioni (da 10 a 60px) per impostare sia le dimensioni della piastrella sia la scala della forma. 3. Regola lo slider dello Spessore traccia (da 0,5 a 6,0). 4. Usa Rotazione (da 0 a 360 gradi, con incrementi di 5 gradi) per ruotare la piastrella tramite patternTransform. 5. Imposta il Colore della forma e il Colore di sfondo utilizzando i due campioni di colore. 6. Fai clic su Copia per copiare l'SVG generato negli appunti.

L'SVG esportato è 200x200 con un blocco <defs><pattern> che utilizza patternUnits="userSpaceOnUse". La larghezza e l'altezza del pattern sono uguali al valore delle Dimensioni, quindi ogni piastrella si ripete su una griglia di quella dimensione. Prima viene disegnato un <rect> di sfondo riempito con il Colore di sfondo, poi un secondo <rect> riempito con url(#pat) sovrappone le piastrelle. Quando la Rotazione è diversa da zero, questa viene applicata sia come patternTransform sul pattern sia come trasformazione rotate() sulla forma stessa.