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:

• --gc: Anzahl der zu überspannenden Spalten.
• --gr: Anzahl der zu überspannenden Zeilen.

So generieren wir Zufallswerte in 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))};`

In CSS wenden wir diese benutzerdefinierten Eigenschaften an:

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

Lassen Sie uns auch einige zufällige Farben in oklch hinzufügen, indem wir eine kleine Hilfsmethode verwenden:

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

Jetzt bekommen wir:

Danke, Grid-Auto-Flow: dicht!

Um die Dinge dynamischer zu gestalten, fügen wir Transformationen wie Drehung und Skalierung hinzu:

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

In JavaScript generieren wir zufällige Transformationswerte:

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

Schauen wir uns das an:

Schick! Um es noch besser zu machen, fügen wir jetzt ein paar coole SVG-Filter hinzu.

In JavaScript fügen wir eine weitere kleine Hilfsmethode hinzu, um einen Zufallsfilter pro -Knoten auszuwählen:

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

Das gibt uns:

Jetzt können wir durch einfaches Anpassen der Eigenschaft --w und der Anzahl der Elemente ganz unterschiedliche Kunstwerke erzeugen:

Oder:

Wir können auch die Start- und Stoppwerte in der Farbmethode anpassen:

---

Demo

Hier ist eine Codepen-Demo. Ich habe unterhalb des Bildmaterials Steuerelemente hinzugefügt, damit Sie die Eigenschaften einfach anpassen können:

Das obige ist der detaillierte Inhalt vonKunst mit CSS-Raster und SVG-Filtern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!