Kunst mit CSS-Raster und SVG-Filtern

Haben Sie jemals die Leistungsfähigkeit von Grid-Auto-Flow: Dense erforscht? In Kombination mit zufällig generierten Werten (auf einen festgelegten Bereich beschränkt) können Sie die Eigenschaften „Rasterspalte“ und „Rasterzeile“ verwenden, um coole, gitterbasierte Kunst zu erstellen. Lasst uns eintauchen!

Erstellen wir zunächst eine Grundgitterstruktur:

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

• display: grid: Erstellt ein CSS-Rasterlayout.
• Grid-Auto-Flow: dicht: Füllt automatisch Lücken im Raster, indem Elemente neu positioniert werden, um Leerräume zu minimieren.
• Grid-Template-Columns: Definiert ein responsives Spaltenlayout. Hier werden automatisch Spalten erstellt, um den verfügbaren Platz zu füllen (automatische Füllung), jeweils mit einer Mindestbreite von --w (Standard: 4cqi) und einer Höchstbreite von 1fr.

Zu diesem Zeitpunkt ist --w undefiniert, daher wird der Standardwert (4cqi) verwendet. So sieht das anfängliche Raster aus:

Als nächstes füllen wir das Raster mit einer Reihe von -Knoten. Während wir diese mit JavaScript rendern, fügen wir 2 Variablen pro Knoten hinzu:

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