Art avec CSS Grid et filtres SVG

Avez-vous déjà exploré la puissance du réseau-auto-flow : dense ? Lorsqu'elles sont combinées avec des valeurs générées aléatoirement (limitées dans une plage définie), vous pouvez utiliser les propriétés de colonne de grille et de ligne de grille pour créer un art sympa basé sur une grille. Allons-y !

Tout d'abord, créons une structure de grille de base :

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

• display:grid : établit une disposition de grille CSS.
• grid-auto-flow : dense : remplit automatiquement les lacunes de la grille en repositionnant les éléments pour minimiser les espaces vides.
• grid-template-columns : définit une disposition de colonnes réactive. Ici, les colonnes sont créées automatiquement pour remplir l'espace disponible (remplissage automatique), chacune avec une largeur minimale de --w (par défaut à 4cqi) et une largeur maximale de 1fr.

À ce stade, --w n'est pas défini, donc la valeur par défaut (4cqi) est utilisée. Voici à quoi ressemble la grille initiale :

Ensuite, nous remplirons la grille avec un tas de nœuds . Au fur et à mesure que nous les rendons avec JavaScript, nous ajoutons 2 variables par nœud :

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))]
  });`