Generatore di sfondi a schema CSS

Gran parte degli strumenti «generatore di schemi» riutilizza in silenzio la stessa formula repeating-linear-gradient per ogni opzione e cambia solo i numeri. Questo no: ciascuno dei sei tipi di schema qui è costruito con la tecnica CSS specifica che produce realmente quella forma. Le strisce usano un singolo repeating-linear-gradient con due bande di colore. I punti usano un radial-gradient piastrellato esclusivamente tramite background-size — il classico trucco CSS per i punti — anziché un repeating-radial-gradient, che non può piastrellare un punto circolare in modo pulito su una griglia rettangolare. La scacchiera usa la vera formula conic-gradient a quattro quadranti: un gradiente conico centrato in una piastrella quadrata si divide naturalmente in quattro quadranti quadrati in corrispondenza dei limiti a 90 gradi, e alternando due colori tra quei quadranti si piastrella in una scacchiera autentica, non un’approssimazione.

Griglia e tratteggio incrociato diagonale sovrappongono entrambi due repeating-linear-gradient come voci background-image separate, invece di simulare la seconda direzione con trucchi sui bordi. La griglia combina un gradiente ripetuto «verso destra» e uno «verso il basso» per linee di riga e colonna nitide. Il tratteggio incrociato sovrappone un gradiente ripetuto a +45° e uno a −45° per un intreccio diagonale a canestro — vale la pena essere precisi: questo è un onesto tratteggio incrociato, non una vera geometria a spina di pesce, e lo strumento lo etichetta in quel modo anziché esagerare. I triangoli riutilizzano la tecnica conic-gradient a quattro cunei della scacchiera, ma avviano il gradiente ruotato di 45 gradi, il che sposta i confini dei cunei dai punti medi dei lati della piastrella ai suoi angoli e trasforma gli stessi quattro cunei in quattro triangoli da angolo ad angolo invece che in quattro quadranti quadrati.

Ogni tipo di schema espone solo i controlli che effettivamente gli si applicano — un cursore per l’angolo compare per le strisce, raggio e distanza dei punti compaiono per i punti, lo spessore della linea compare per griglia e tratteggio incrociato — e l’ampia area di anteprima piastrellata si ridisegna a ogni modifica, così puoi vedere diverse ripetizioni complete prima di fissare un valore. Passa la modalità di output su SVG e lo stesso schema riappare come elemento <pattern> costruito con primitive semplici rect, circle, path o polygon, pronto da incollare dentro i <defs> di qualsiasi documento SVG, con un download in un clic per un file .svg autonomo.

Tutto funziona in locale nel tuo browser: nessun caricamento di immagini, nessun giro sul server, nessun account. Per riempimenti a tinta unita o sfumati senza ripetizione, lo strumento giusto su questo sito è invece il generatore di gradienti CSS; questo è specifico per sfondi geometrici piastrellabili costruiti senza alcuna risorsa immagine.