Generatore di sfondi modello CSS

La maggior parte degli strumenti "generatori di modelli" riutilizzano tranquillamente la stessa formula di gradiente lineare ripetuto per ogni opzione e cambiano semplicemente i numeri. Questo no: ognuno dei sei tipi di pattern qui presenti è costruito dalla specifica tecnica CSS che effettivamente produce quella forma. Le strisce utilizzano un singolo gradiente lineare ripetuto con due bande di colore. I punti utilizzano un gradiente radiale affiancato esclusivamente attraverso la dimensione dello sfondo (il classico trucco dei punti CSS) piuttosto che un gradiente radiale ripetuto, che non può affiancare in modo pulito un punto circolare su una griglia rettangolare. La scacchiera utilizza la vera formula del gradiente conico a quattro quadranti: un gradiente conico centrato in una tessera quadrata si divide naturalmente in quattro quadrati quadranti con confini di 90 gradi e alterna due colori su quelle tessere quadranti in una vera scacchiera, non un'approssimazione.

La griglia e il tratteggio diagonale sovrappongono entrambi due gradienti lineari ripetuti come voci separate dell'immagine di sfondo anziché falsificare la seconda direzione con trucchi sui bordi. La griglia combina un gradiente ripetuto "a destra" e "in basso" per linee guida orizzontali e verticali nitide. Il tratteggio incrociato sovrappone un gradiente ripetuto di +45° e -45° per una trama diagonale in stile basketweave - su cui vale la pena essere precisi: si tratta di un crosshatch onesto, non di una vera geometria a spina di pesce, e lo strumento lo etichetta in questo modo anziché rivendicare eccessivamente. I triangoli riutilizzano la tecnica del gradiente conico a quattro spicchi della scacchiera, ma iniziano il gradiente ruotato di 45 gradi, che sposta i confini del cuneo dai punti medi del bordo della piastrella ai suoi angoli e trasforma gli stessi quattro cunei in quattro triangoli da angolo ad angolo invece di quattro quadrati quadrati.

Ogni tipo di pattern espone solo i controlli che effettivamente si applicano ad esso: un cursore dell'angolo viene visualizzato per le strisce, il raggio del punto e la spaziatura vengono visualizzati per i punti, lo spessore della linea viene visualizzato per la griglia e il tratteggio incrociato - e la grande casella di anteprima piastrellata viene ridisegnata ad ogni modifica in modo da poter vedere diverse ripetizioni complete prima di impegnarsi in un valore. Inverti la modalità di output in SVG e lo stesso modello riappare come un elemento <pattern> costruito da semplici primitive rect, circle, path o polygon, pronto per essere incollato all'interno di <defs> di qualsiasi documento SVG, con un download con un clic per un file .svg autonomo.

Tutto viene eseguito localmente nel tuo browser: nessun caricamento di immagini, nessun andata e ritorno sul server, nessun account. Per riempimenti solidi o sfumati senza ripetizioni, il generatore di gradienti CSS su questo sito è invece lo strumento giusto; questo è specifico per sfondi geometrici piastrellabili creati da zero risorse di immagine.