Penjana Latar Belakang Corak CSS

Kebanyakan alat "penjana corak" secara senyap menggunakan semula formula kecerunan linear berulang yang sama untuk setiap pilihan dan hanya menukar nombor. Yang ini tidak: setiap satu daripada enam jenis corak di sini dibina daripada teknik CSS khusus yang sebenarnya menghasilkan bentuk tersebut. Jalur menggunakan kecerunan linear berulang dengan dua jalur warna. Titik menggunakan satu kecerunan jejari berjubin semata-mata melalui saiz latar belakang — helah titik CSS klasik — dan bukannya kecerunan jejarian berulang, yang tidak boleh jubin titik bulat dengan bersih pada grid segi empat tepat. Papan dam menggunakan formula kecerunan kon empat kuadran sebenar: kecerunan kon yang berpusat pada jubin segi empat sama secara semula jadi terbahagi kepada empat segi empat sama pada sempadan 90 darjah dan menyelang-seli dua warna merentas jubin kuadran tersebut menjadi papan dam tulen, bukan anggaran.

Grid dan pepenjuru silang menetas kedua-dua lapisan dua berulang-linear-cerunan sebagai entri imej latar belakang yang berasingan daripada memalsukan arah kedua dengan helah sempadan. Grid menggabungkan kecerunan berulang "ke kanan" dan "ke bawah" untuk garis peraturan mendatar dan menegak yang jelas. Crosshatch melapisi kecerunan berulang +45deg dan -45deg untuk anyaman pepenjuru gaya anyaman bakul — berbaloi untuk diteliti dengan tepat: ini ialah crosshatch yang jujur, bukan geometri tulang herring yang sebenar, dan alat melabelkannya dengan cara itu dan bukannya menuntut berlebihan. Segitiga menggunakan semula teknik kecerunan kon empat baji papan dam tetapi mulakan kecerunan diputar 45 darjah, yang mengalihkan sempadan baji dari titik tengah tepi jubin ke bucunya dan menukar empat baji yang sama menjadi empat segi tiga sudut ke sudut dan bukannya empat segi empat kuadran.

Setiap jenis corak hanya mendedahkan kawalan yang benar-benar terpakai padanya — peluncur sudut muncul untuk jalur, jejari titik dan jarak muncul untuk titik, ketebalan garisan muncul untuk grid dan crosshatch — dan kotak pratonton berjubin besar mengecat semula pada setiap perubahan supaya anda boleh melihat beberapa ulangan penuh sebelum melakukan sesuatu nilai. Balikkan mod output kepada SVG dan corak yang sama muncul semula sebagai elemen <pattern> yang dibina daripada primitif tegak lurus, bulatan, laluan atau poligon biasa, sedia untuk tampal dalam mana-mana <defs> dokumen SVG, dengan muat turun satu klik untuk fail .svg kendiri.

Semuanya berjalan secara setempat dalam penyemak imbas anda: tiada muat naik imej, tiada pelayan pergi balik, tiada akaun. Untuk isian pepejal atau kecerunan tanpa pengulangan, penjana kecerunan CSS di tapak ini ialah alat yang betul; yang ini khusus untuk latar belakang geometri boleh jubin yang dibina daripada aset imej sifar.