使用 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中文网其他相关文章！