Seni dengan Grid CSS dan penapis SVG

Pernahkah anda meneroka kuasa grid-auto-flow: padat? Apabila digabungkan dengan nilai yang dijana secara rawak (terkekang dalam julat yang ditetapkan), anda boleh menggunakan sifat lajur grid dan baris grid untuk mencipta seni berasaskan grid yang keren. Mari selami!

Mula-mula, mari buat struktur grid asas:

main {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,
 minmax(var(--w, 4cqi), 1fr));
}

• paparan: grid: Mewujudkan reka letak grid CSS.
• grid-auto-flow: padat: Mengisi jurang dalam grid secara automatik dengan meletakkan semula item untuk meminimumkan ruang kosong.
• grid-template-columns: Mentakrifkan susun atur lajur responsif. Di sini, lajur dicipta secara automatik untuk mengisi ruang yang tersedia (autoisi), setiap satu dengan lebar minimum --w (lalai kepada 4cqi) dan lebar maksimum 1fr.

Pada ketika ini, --w tidak ditentukan, jadi nilai lalai (4cqi) digunakan. Begini rupa grid awal:

Seterusnya, kami akan mengisi grid dengan sekumpulan -nod. Semasa kami memberikannya dengan JavaScript, kami menambah 2 pembolehubah setiap nod:

const random = (min, max) => 
  Math.random() * (max - min) + min

const column = () => 
`--gc:${Math.floor(random(0, 4))};`

const row = () => 
`--gr:${Math.floor(random(0, 3))};`

b {
  background: oklch(var(--l) var(--c) var(--h) / var(--a));
  grid-column: span var(--gc);
  grid-row: span var(--gr, 1);
}

const color = () => `--l:${
  random(0, 100)}%;--c:${
  random(0, 0.5)};--h:${
  random(0, 60)};--a:${
  random(0.2, 1)};`

b {
  rotate: var(--r);
  scale: var(--s);
}

const transform = () => 
`--r:${random(-2, 3)}deg;
--s:${random(0.8, 1.2)};`

const filter = () =>
  `--url:url(#${
    [
      "pencilTexture",
      "pencilTexture2",
      "pencilTexture3",
      "pencilTexture4",
    ][Math.floor(random(0, 4))]
  });`