Generatore di sfondi a motivo
Background Pattern Generator
Genera motivi SVG ripetibili senza giunte — righe, pois, griglie, grana — con controlli di colore e di scala.
Disegna un motivo di sfondo continuo — pallini, griglia, righe, quadretti, croci, triangoli o onde — e lo restituisce come data URI CSS, come file SVG o come frammento `<pattern>` da incollare in un documento esistente. La rotazione è applicata come `patternTransform`, così la piastrella resta continua invece di spezzarsi ai propri bordi.
Motivo
Il motivo più silenzioso che ci sia. Tieni il pallino sotto un quinto della piastrella, altrimenti si legge come texture e non come motivo.
Risultato
450 byte come URI codificato in URL contro 526 in Base64.
Codificato in URL invece che in Base64: qui è 14% più piccolo e resta leggibile nel foglio di stile. Il codificatore di SVG in data URI fa lo stesso con qualsiasi SVG.
Come si usa
Scegliere la forma
Ognuna dice a che cosa serve. I pallini sono i più discreti; una griglia è leggibile dietro uno schema e distrae dietro un testo; le righe diagonali sono il riempimento «lavori in corso» che tutti riconoscono.
Impostare la dimensione della piastrella e lo spessore
Lo spessore è una frazione della piastrella e non un valore in pixel, così il motivo mantiene il suo carattere quando si ridimensiona la piastrella. Sopra un quinto circa la forma smette di leggersi come motivo e comincia a leggersi come texture.
Tenere basso il contrasto
È questa la decisione che fa o disfa uno sfondo. Un motivo che si vede è di solito già troppo forte: conviene scegliere un primo piano a un passo o due dallo sfondo invece di un colore in contrasto, e controllarlo dietro un testo reale prima di mandarlo in produzione.
Prendere il CSS, il file o il frammento
Il CSS è un data URI codificato per URL, pronto per `background-image`. Il file SVG serve ovunque un URI non basti. Il frammento `<pattern>` va dentro un `<svg>` esistente e si richiama con `fill="url(#p)"`.
Domande frequenti
Si affianca senza giunture?
Sì, ed è la parte per cui la geometria sta lavorando. Le righe diagonali sono disegnate come tre copie ripiegate, così la diagonale prosegue oltre il bordo della piastrella, e l’onda è formata da due segmenti cubici con la pendenza corrispondente al punto di giunzione. La rotazione passa da `patternTransform` per la stessa ragione: ruotare la geometria dentro la piastrella lascerebbe estremità tagliate al confine.
Posso esportare un PNG?
Non qui. L’uscita è SVG in tre confezioni, che è indipendente dalla risoluzione e pesa una frazione: un motivo a pallini sono poche centinaia di byte come data URI e sarebbero qualche kilobyte come piastrella PNG. Se serve un raster, si scarica l’SVG e lo si rasterizza.
Un motivo di sfondo peggiora le prestazioni?
Di rado, ma un caso reale c’è: una piastrella molto piccola su una superficie molto grande costringe il compositore a ripeterla moltissime volte, e su un telefono di fascia bassa questo si vede nello scorrimento. Se una pagina con sopra un motivo sembra pesante, conviene provare una piastrella più grande con la stessa densità apparente.
Posso usare un motivo come texture sopra un’immagine?
Sì: attivando lo sfondo trasparente la piastrella porta solo le forme in primo piano, quindi ciò che sta dietro traspare. Va impilato come secondo livello di `background-image` sopra la fotografia.
Può ricevere da
Generatore di gradienti CSS
CSS Gradient Builder
Costruisce gradienti lineari, radiali e conici trascinando i punti di arresto ed esporta il CSS in sRGB o in OKLCH.
Generatore di immagini per la condivisione
Social Card Generator
Compone un’immagine di condivisione 1200 × 630 da titolo, sottotitolo, riga di marchio e logo facoltativo su un modello a scelta, e scrive i meta tag che le vanno accanto.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Generatore di gradienti CSS
CSS Gradient Builder
Costruisce gradienti lineari, radiali e conici trascinando i punti di arresto ed esporta il CSS in sRGB o in OKLCH.
Generatore di immagini per la condivisione
Social Card Generator
Compone un’immagine di condivisione 1200 × 630 da titolo, sottotitolo, riga di marchio e logo facoltativo su un modello a scelta, e scrive i meta tag che le vanno accanto.
Da SVG a data URI per CSS
SVG to CSS Data URI
Codifica un SVG come data URI da usare come sfondo CSS, applicando l’escape solo dove serve per tenerlo corto.
Ottimizzare un SVG
SVG Optimiser
Toglie i residui lasciati dagli editor, fonde le trasformazioni e arrotonda la precisione dei tracciati, mostrando il confronto disegnato.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.