Generatore di pattern SVG: tessere di sfondo senza giunture | We.Inc
Dieci pattern SVG senza giunture per sfondi: pois, griglia, onde, esagoni e altri. Imposta dimensione, spessore della linea, colori, opacità e angolo, poi copia il CSS o un SVG con un elemento pattern.
Scegli una delle dieci forme di tessera, imposta dimensione, spessore della linea, colori, opacità e angolo, e ottieni uno sfondo SVG senza giunture. Copialo come data URL per background-image CSS che si ripete su qualsiasi elemento, oppure come file SVG basato sull'elemento pattern da usare dentro le illustrazioni, entrambi disegnati e visualizzati in anteprima nel tuo browser.
Tessera SVG o pattern con gradienti CSS?
Esigenza
Cosa usare
Perché
Curve, esagoni, onde, segni più
Tessera SVG (questo strumento)
Qualsiasi forma che SVG sa disegnare
Righe, pois, scacchi semplici
Gradienti CSS
Nessuna immagine, vedi il generatore di sfondi CSS
Pattern dentro un'illustrazione SVG
Elemento <pattern>
Riempie qualsiasi forma SVG
I trucchi con i gradienti sanno disegnare righe e pois, ma faticano con onde, esagoni e contorni. Una piccola tessera SVG può disegnare qualsiasi cosa e resta nitida a ogni livello di zoom, e come data URL non aggiunge richieste alla pagina.
Scegli un pattern. L'anteprima riempie un pannello ampio così puoi valutare la texture in scala reale.
Regola la dimensione della tessera e lo spessore della linea o il raggio dei punti, poi scegli i colori dell'inchiostro e dello sfondo.
Abbassa l'opacità dell'inchiostro per una texture discreta, e imposta un angolo se vuoi ruotare le tessere.
Copia il CSS per uno sfondo, l'SVG della singola tessera o l'SVG completo che usa un elemento pattern.
Le texture di sfondo devono restare discrete. Un'opacità dell'inchiostro tra 0.1 e 0.25 su uno sfondo colorato raramente disturba il testo.
Adatta la dimensione della tessera alla tua scala di spaziature, per esempio 16, 24 o 32 pixel, così le linee si allineano alla griglia del layout.
Quando ruoti un pattern, lo strumento passa alla forma con l'elemento pattern, perché una singola tessera ruotata non si unirebbe più senza giunture.
Metti i pattern su un contenitore o su uno pseudo elemento dietro il contenuto, così puoi cambiarli o rimuoverli in un solo punto.
Domande frequenti
Perché codificare # e < nella data URL?
Dentro un URL, # inizia un frammento e tronca l'immagine, e alcuni parser rifiutano le parentesi angolari non codificate. Codificarle come %23, %3C e %3E mantiene intatto l'SVG. Le virgolette doppie diventano singole così la stringa sta dentro url("...").
Cosa fa patternUnits="userSpaceOnUse"?
Misura larghezza e altezza della tessera nelle stesse unità del disegno, così una tessera da 24 è larga 24 pixel ovunque venga usata. Il valore predefinito, objectBoundingBox, dimensiona invece le tessere come frazioni della forma riempita.
Posso usare il pattern in Tailwind?
Sì. Aggiungi la regola CSS al tuo foglio di stile come classe, oppure usa valori arbitrari come bg-[url(...)] con la data URL. Una classe è più leggibile quando l'URL è lungo.
Questi pattern sono gratuiti?
Sì. Ogni tessera è disegnata a partire da forme semplici dal codice di questa pagina, quindi il risultato è tuo e non serve citare la fonte.
Come funziona una tessera senza giunture
Una tessera si ripete da bordo a bordo, quindi tutto ciò che esce dal lato destro deve rientrare da sinistra. Il pattern diagonale, per esempio, disegna brevi segmenti aggiuntivi in due angoli così le linee proseguono oltre i bordi della tessera senza interruzioni.
I tratti centrati sul bordo della tessera, come nella griglia, vengono tagliati a metà dalla tessera. Due tessere vicine formano così una sola linea a spessore pieno, ed è per questo che la griglia appare uniforme.
Due modi per usarlo
Per gli sfondi, una data URL in CSS è la soluzione più semplice: una regola, nessun file da ospitare, e background-size controlla la scala. Il browser decodifica la tessera una volta e la ripete.
Dentro un'illustrazione SVG, definisci un pattern in defs e riempi le forme con url(#id). patternTransform può ruotare o scalare l'intero pattern senza ridisegnarlo.
Attributi del pattern SVG
Attributi dell'elemento pattern usati dal generatore
Attributo
Predefinito
Cosa fa
width / height
Dimensione di una tessera; un valore di 0 non disegna nulla
patternUnits
objectBoundingBox
Unità per x, y, width, height; questo strumento usa userSpaceOnUse
patternContentUnits
userSpaceOnUse
Unità per le forme dentro la tessera
patternTransform
none (identità)
Ruota, scala o inclina l'intero pattern
Sposta il punto di partenza della prima tessera
Pattern come sfondo CSS
Texture a esagoni dietro una card
Una tessera esagonale da 28 pixel a metà opacità. Cambia background-size per scalare la texture.
La stessa tessera con l'elemento pattern
Usala dentro illustrazioni SVG inline. Qualsiasi forma può avere fill="url(#p)".
Pois
Carta millimetrata
Linee diagonali
Segni più
Zigzag
Onde
Triangoli
Scacchiera
Anelli
Esagoni
Generatore di pattern
Pattern: Pois, Carta millimetrata, Linee diagonali, Segni più, Zigzag, Onde, Triangoli, Scacchiera, Anelli, Esagoni. Imposta dimensione, spessore della linea, colori, opacità e angolo, poi copia CSS o SVG.