使用 CSS 網格和 SVG 濾鏡進行藝術創作

您是否探索過網格自動流的力量：密集？當與隨機生成的值（限制在設定範圍內）結合使用時，您可以使用網格列和網格行屬性來創建很酷的基於網格的藝術。讓我們開始吧！

首先，讓我們建立一個基本網格結構：

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

• display: grid: 建立 CSS 網格佈局。
• grid-auto-flow: 密集：透過重新定位項目以最小化空白空間來自動填滿網格中的間隙。
• grid-template-columns：定義響應式列佈局。這裡，自動建立列來填入可用空間（自動填入），每個列的最小寬度為 --w （預設為 4cqi），最大寬度為 1fr。

此時，--w未定義，因此使用預設值（4cqi）。初始網格如下圖所示：

接下來，我們將用一堆 -節點填滿網格。當我們使用 JavaScript 渲染它們時，我們為每個節點添加 2 個變數：

• --gc：要跨越的列數。
• --gr：要跨越的行數。

以下是我們如何在 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))};`

在 CSS 中，我們應用這些自訂屬性：

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

我們也可以使用一個小輔助方法在 oklch 中加入一些隨機顏色：

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

現在我們得到：

謝謝你，grid-auto-flow：密集！

為了讓事情更加動態，讓我們加入旋轉和縮放等轉換：

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

在 JavaScript 中，我們產生隨機轉換值：

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

我們來看看：

太棒了！現在，為了更進一步，讓我們添加一些很酷的 SVG 濾鏡。

在 JavaScript 中，我們新增了另一個小輔助方法來為每個 節點選擇一個隨機過濾器：

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

這給了我們：

現在，透過簡單地調整 --w 屬性和元素數量，我們就可以產生截然不同的藝術作品：

或：

我們也可以在顏色方法中調整開始值和停止值：

---

示範

這是一個 Codepen 演示。我在圖稿下方新增了控件，因此您可以輕鬆調整屬性：

以上是使用 CSS 網格和 SVG 濾鏡進行藝術創作的詳細內容。更多資訊請關注PHP中文網其他相關文章！