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 :

• --gc : Nombre de colonnes à couvrir.
• --gr : Nombre de lignes à couvrir.

Voici comment nous générons des valeurs aléatoires en JavaScript :

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

En CSS, nous appliquons ces propriétés personnalisées :

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

Ajoutons également quelques couleurs aléatoires dans oklch, en utilisant une petite méthode d'assistance :

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

Maintenant, nous obtenons :

Merci, grid-auto-flow : dense !

Pour rendre les choses plus dynamiques, ajoutons des transformations comme la rotation et la mise à l'échelle :

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

En JavaScript, nous générons des valeurs de transformation aléatoires :

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

Vérifions ça :

Fantastique ! Maintenant, pour passer à la vitesse supérieure, ajoutons quelques filtres SVG sympas.

En JavaScript, nous ajoutons une autre petite méthode d'assistance pour choisir un filtre aléatoire par nœud  :

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

Cela nous donne :

Maintenant, en ajustant simplement la propriété --w et le nombre d'éléments, nous pouvons générer des œuvres d'art très différentes :

Ou :

Nous pouvons également ajuster les valeurs de début et de fin dans la méthode de couleur :

---

Démo

Voici une démo de Codepen. J'ai ajouté des contrôles sous l'illustration, afin que vous puissiez facilement modifier les propriétés :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!