Penjana Latar Belakang Corak CSS

Kebanyakan alat "penjana corak" secara senyap menggunakan semula formula repeating-linear-gradient yang sama untuk setiap pilihan dan hanya menukar nombor. Alat ini tidak begitu: setiap satu daripada enam jenis corak di sini dibina daripada teknik CSS khusus yang benar-benar menghasilkan bentuk tersebut. Jalur menggunakan satu repeating-linear-gradient dengan dua jalur warna. Titik menggunakan satu radial-gradient yang dijubin sepenuhnya melalui background-size — helah titik CSS klasik — dan bukannya repeating-radial-gradient, yang tidak dapat menjubin titik bulat dengan bersih pada grid segi empat tepat. Papan dam menggunakan formula conic-gradient empat kuadran sebenar: kecerunan kon yang berpusat dalam jubin segi empat secara semula jadi terbahagi kepada empat segi empat kuadran pada sempadan 90 darjah, dan menyelang-selikan dua warna merentasi kuadran tersebut menjadi papan dam tulen, bukan anggaran.

Grid dan lorek silang menyerong kedua-duanya melapik dua repeating-linear-gradients sebagai entri background-image berasingan dan bukannya memalsukan arah kedua dengan helah sempadan. Grid menggabungkan kecerunan berulang "to right" dan "to bottom" untuk garis peraturan mendatar dan menegak yang tajam. Lorek silang melapik kecerunan berulang +45deg dan -45deg untuk anyaman menyerong gaya bakul — wajar dinyatakan dengan tepat: ini adalah lorek silang yang jujur, bukan geometri herringbone sebenar, dan alat ini melabelnya sedemikian tanpa menuntut lebih. Segi tiga menggunakan semula teknik conic-gradient empat baji papan dam tetapi memulakan kecerunan dengan putaran 45 darjah, yang mengalihkan sempadan baji dari titik tengah tepi jubin ke penjurunya dan menjadikan empat baji yang sama menjadi empat segi tiga penjuru-ke-penjuru dan bukannya empat segi empat kuadran.

Setiap jenis corak hanya memaparkan kawalan yang benar-benar terpakai padanya — pelaras sudut muncul untuk jalur, jejari dan jarak titik muncul untuk titik, ketebalan garisan muncul untuk grid dan lorek silang — dan kotak pratonton berjubin yang besar dikemas kini pada setiap perubahan supaya anda dapat melihat beberapa ulangan penuh sebelum mentetapkan nilai. Tukar mod output kepada SVG dan corak yang sama muncul semula sebagai elemen <pattern> yang dibina daripada primitif rect, circle, path atau polygon biasa, sedia ditampal ke dalam <defs> mana-mana dokumen SVG, dengan muat turun satu klik untuk fail .svg kendiri.

Semuanya berjalan secara setempat dalam pelayar anda: tiada muat naik imej, tiada perjalanan pergi balik pelayan, tiada akaun. Untuk isian pepejal atau kecerunan tanpa pengulangan, penjana kecerunan CSS di laman ini adalah alat yang tepat sebagai ganti; alat ini khusus untuk latar belakang geometri berjubin yang dibina daripada aset imej sifar.