生成式 SVG 入门套件

SVG 是生成艺术的绝佳媒介。它可以缩放到任意分辨率，调试起来非常轻松，并且内置了众多令人惊叹的滤镜/效果。

这篇文章旨在为您提供创建自己的生成式 SVG 艺术/设计所需的所有工具。与我的其他教程不同，我们不会在这里创建一个单独的示例。相反，我们将研究一系列库、实用函数和技术，一旦学会，您就可以用它们来创作任何您喜欢的作品！

听起来不错？那就行动起来吧🎨

嘘！我在精彩的viewBox 新闻简报中讨论了生成式 SVG 之后写了这篇文章。请务必查看此处的期刊，了解更多生成式内容。

此入门套件适合哪些人使用？

你是 SVG 新手，还是 SVG 的“魔术师”，又是谁？你正在尝试 SVG 的海洋吗？这里总有适合你的地方！

无需任何生成艺术知识即可充分利用本文。不过，一些基本的 SVG 知识（绘制形状、填充颜色等）会有所帮助。为了充分利用此入门套件，您还需要具备 HTML/CSS/JS 的应用知识。

如果您对 SVG完全陌生，我建议您阅读这篇MDN 教程。您可以参考文档，并在CodePen上进行实验。绘制一些简单的形状，移动它们，然后涂上颜色。SVG 是一种类似 HTML 的标记语言，它远没有看起来那么可怕。

给我看代码！

如果您想跳过这一步，直接使用这个入门包进行创作，我帮您搞定。这里有一个 CodePen，包含所有实用函数和 HTML/CSS 设置。点击fork即可立即开始。

我知道，现在看起来不多，但这里有很多东西需要解开......

前进！

什么是生成艺术？

对于一些阅读本文的人来说，“生成艺术”这个术语可能比较陌生。如果您已经熟悉生成艺术/设计方法，请跳过本节。

如果没有的话——这里有一个简单的例子……

假设你是一位画家。你的调色板里有六种颜色和一些骰子。你掷骰子。根据骰子的点数，你从六种颜色中选择一种，在画布上画一条条纹。如果骰子点数为“1”，你就画一条蓝色条纹；如果点数为“2”，你就画一条红色条纹，以此类推。你重复这个过程，直到画布写满为止。

这就是生成艺术的全部。它是一种带有自主性/偶然性的艺术。除了你自己定义的规则之外，没有任何规则。生成艺术甚至不需要数字化。计算机恰好是这类创作的绝佳伴侣。为什么？因为它们擅长快速执行重复性任务。

为了说明上述内容，这里有一个简单的 CodePen，可以在画布上“绘制”随机条纹：

试试点击“重新生成”按钮。速度很快吧？计算机只需几毫秒就能重新渲染图像，并生成随机结果。这比在实体画布上进行人为绘画效率高得多！这种速度在探索更复杂的突发行为/模式时非常宝贵。

一块空白的画布

大多数绘画都是从某种空白画布开始的。在使用生成式 SVG 时，该画布就是<svg>网页上的一个元素。以下是我为几乎所有生成式 SVG 作品设置 HTML/CSS 的方法。

<svg class="canvas" viewBox="0 0 200 200"></svg>

首先，在 HTML 中，我们有一个<svg>元素，它只设置了一个属性，即viewBox。此属性定义一个坐标空间。在本例中，该坐标空间的宽度为 200 个单位，高度为 200 个单位。

定义完成后，我们会根据 SVG 元素的 viewBox 来“绘制”其中的所有内容。之后，SVG 会将其内容缩放到任意分辨率。这是 SVG 最便捷的功能之一，尤其是在生成艺术方面。单个 SVG 就能生成巨大的实体打印件，也能在狭窄的移动屏幕上进行渲染！

注意： 我这里讲的比较笼统。如果你想了解更多关于 viewBox 属性的信息，可以看看 这篇关于 CSS 技巧的文章 。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background: hsl(0, 0%, 96%);
}

.canvas {
  width: 75vmin;
  height: 75vmin;
  background: hsl(0, 0%, 100%);
}

接下来，在 CSS 中，我们选择了一些样式来实现两个目的：

确保 SVG 元素为完美正方形，且始终适合视口。恰好位于正中央。非常适合 CodePens！
将 SVG 元素填充为白色，并将页面背景设置为浅灰色。这有助于使画布更加直观。

就这样！这个 HTML/CSS 设置就是你开始使用生成式 SVG 所需的一切。它简单、灵活，并且能确保你的作品在每个人的屏幕上都看起来很棒。

注意： 我偏好使用 200x200 单位的画布，完全可以随意调整。不喜欢正方形？可以尝试使用你自己的 viewBox 单位、宽高比/元素大小。

SVG画笔

如果说 SVG 元素是我们的画布，那么SVG.js就是我们的画笔。在进行生成艺术创作时，你需要以动态的方式创建元素（例如 a<rect>或 a ）。<circle>

假设你想在循环中创建形状。你创建一个 for 循环，迭代 100 次。在每次迭代中，选择一个介于 0 到 1 之间的随机数。如果该数字大于 0.5，则绘制一个矩形。如果该数字小于 0.5，则绘制一个圆形。

由于 SVG 是一种标记语言，因此没有内置的方法来处理这种条件/实时渲染。这时，JavaScript（通过 SVG.js）就派上用场了。

仅使用 JavaScript 编写 SVG 脚本可能会很繁琐。SVG.js 提供了一种简洁易用的方法来创建/删除/更新 SVG 元素。就是这样。它几乎完全覆盖了 SVG 规范，使用起来非常愉快。

以下是上述条纹程序所需的 JS 摘录，不含SVG.js：

for (let i = 0; i < width; i += stripeWidth) {
  ...
  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

  rect.setAttribute("x", i);
  rect.setAttribute("y", 0);
  rect.setAttribute('width', stripeWidth);
  rect.setAttribute('height', height);
  rect.setAttribute("fill", color);
  rect.setAttribute("stroke", "#fff");

  svgElement.appendChild(rect);
}

以下是上述条纹程序所需的 JS 摘录，使用SVG.js：

for (let i = 0; i < width; i += stripeWidth) {
  ...
  svg.rect(stripeWidth, height).x(i).y(0).fill(color).stroke("#fff");
}

啊，好多了🧘

注意：如果您希望减少依赖项，仅使用 JavaScript 完全没问题。可能还有其他更优雅的方式来处理上述问题，但就我个人而言，我更喜欢卸载 SVG 脚本，专注于创意工作。

SVG.js 的现状

为了演示 SVG.js 的功能，我在这里放了一些Liam Egan编写的精彩 CodePen 。这些 CodePen 完美地展现了生成式 SVG 的优美，以及 SVG.js 在生成式环境中的强大功能。

“成长4”

《耀斑2》

一定要去Liam 的 CodePen看看！🖊

4 个实用功能……无限可能

好了，我们有了一块响应式空白画布，以及一个很棒的添加内容的方式。下一步呢？如果能有一些有用的函数来决定渲染什么就更好了。

首先，简单说一下。人们普遍误以为生成艺术非常复杂🤯，需要数学高手才能理解。好吧，引用伟大的德怀特·施鲁特（Dwight Shrute）的话……

错误的

你不需要。我保证它没有想象中那么可怕。掌握了这里教的4个函数/示例，你就能拥有创作精美艺术作品所需的一切。无需任何复杂的数学技能。创造力是精彩的生成艺术中最重要的要素。

我已将所有这些功能的源代码添加到此存储库。它们也可作为NPM 包使用，以方便安装。

注意： 这不是一个“官方”库，所以请不要期待测试、文档等……！👀

随机的（）

这是经典的生成式算法。我的版本random()可以做两件事：返回一个范围内的随机数，或者返回一个数组中的随机项。

下面介绍如何使用它来生成一定范围内的随机数：

下面展示了如何使用它从数组中选择一个随机项：

太棒了！这个简单的函数将成为你创作之旅的忠实伙伴。你可以用它来：

生成随机半径<circle>
将对象放置在 SVG 中的随机位置
从预定义的值数组中选择一个随机填充颜色
将元素旋转随机量

如果此功能对您来说很新，请分叉启动器 CodePen 并进行一段时间的实验！

地图（）

这是一个非常有用的函数，尤其是在处理用户交互时。它的作用是将一个通常存在于某个范围内的数字映射到另一个范围内。这个解释起来有点棘手，所以这里有一个 CodePen：

在此示例中，我们map()根据用户的鼠标位置调整椭圆的宽度/高度。深入研究 JavaScript 代码，查看实际示例，了解其map()工作原理 👀

虽然map()它在处理用户输入方面非常出色，但它在其他许多情况下也能派上用场。你可以用它来：

根据元素与另一个元素的距离设置元素的大小
将天气 API 中的温度数据映射到黄色圆圈的不透明度……就像太阳一样！
通过将当前滚动位置映射到更有用（随机？）的范围来为滚动元素添加动画

再次强调，如果这个功能对你来说很新，不妨试试。打开 CodePen 试试吧！

样条线()

如果你看过我的任何教程，或者查看过我的 CodePen 个人资料，你就会亲眼见证它的spline()实际效果。我太着迷了。它是最棒的。

它有什么作用？它可以在任何点集之间绘制一条完美平滑的曲线。它对于创建有机、柔和的形状有着不可思议的效果。以下是一个简单的示例spline()：

我们存储了一个随机坐标数组{ x, y }（谢谢random()），并用spline()它们绘制了一条平滑的曲线。太棒了！你可能已经看到了它对数据可视化的强大功能，但样条曲线的功能远不止于此。

在这个 CodePen 中，我使用spline()来创建一个起伏的 SVG blob：

您可以在此处查看此 CodePen 的教程。

在这个例子中，我使用spline()来为小斑点角色创建生成体：

您可以在此处查看此 CodePen 的教程。

太棒了！像往常一样，试试这个功能，看看你能创造出什么酷炫的东西。如果你愿意，甚至可以参考上面的某个教程。

路径点数（）

这是我的生成工具箱中的新成员。它返回绘制在 SVG 元素上的等距点数组<path>。这很神奇，因为它允许你创建自己的生成式描边样式。

以下是我为精彩的 viewBox 新闻通讯整理的这项技术的演示：

快速浏览一下上面 CodePen 的源代码。你会看到random()它与的配合有多么好pointsInPath()。太神奇了！

颜色

有些人喜欢用黑白来创作，这很棒。我……我喜欢明亮多彩的东西。在生成艺术中，我没有固定的色彩处理方法，但我喜欢用 HSL 作为格式。

为什么？对我来说，HSL 比 HEX 或 RGB 直观得多。我不会在这里深入探讨 HSL，但我会在本文中详细解释它的工作原理。

使用 JS模板字面量和 HSL，只需几行代码即可生成调色板。以下是示例：

在这个例子中，我们利用random()来选择一个“基础”随机色调。然后，我们创建 3 个模板文字颜色，每个颜色的色调相差 120 度。这方面的专业术语是“三色”调色板。这是一种经典、简单的选择颜色搭配效果的方法。

您可以扩展此方法以使用许多其他旋转步骤...有关色彩理论和使用色轮的更多信息，请查看本文。

举例来说，您想使用类似的调色板（3 种色调，每种色调相差 30 度），代码将如下所示：

动画片

到目前为止，我们只专注于静态视觉元素的创作。对于很多东西来说，这已经很棒了！我喜欢创作静态的生成图像。不过，有时你得让东西动起来。

生成动画是一个庞大的话题，值得专门写一篇文章来阐述。不过，现在，我先来概述一下我制作动画的两种主要方式……

方法一、动画循环

对于某些草图，例如我之前提到的起伏的斑点，我会使用动画循环。JavaScript 中的动画循环通常如下所示：

function animate() {
  ...
  requestAnimationFrame(animate);
}

这里发生了什么？该函数animate()一遍又一遍地调用自身，帧率大约为 60 FPS。它使用 browser 方法实现这一点requestAnimationFrame。在此函数中，您可以更新变量并移动内容。

我不会在requestAnimationFrame这里深入探讨，但如果您想了解更多，这里有一篇很棒的 CSS 技巧文章。

这是一个简单的 CodePen，展示如何使用动画循环在<rect>屏幕上移动：

方法 2，GSAP

最近，我一直在使用动画库GSAP来处理我的一些动画。GSAP 功能强大、灵活，非常适合生成性工作。它还内置了非常棒的缓动预设。

我不会详细演示 GSAP，因为它已经有了详尽的文档。不过，值得链接到它的实用函数页面。这里有很多很棒的内容，包括一些与我们之前探索过的实用程序类似的函数。

这是一个快速的 CodePen，演示了一些生成式 GSAP 动画：

后续步骤Next steps

你成功了！恭喜！这真是一次旋风般的生成艺术之旅。现在你已经掌握了创作精彩生成艺术所需的所有技术知识。那么，灵感呢？

如果我苦苦寻觅灵感，我会向我喜欢的艺术家/设计师学习。我会找到他们的作品，仔细研究它的结构、色彩、形状、纹理，然后以此为基础进行创作。如何让一件作品富有创造力？好的艺术家会借鉴他人的设计，等等……

如果你缺乏灵感，另一个不错的探索途径是Dribbble。Dribbble绝对是一座汇聚了众多新鲜设计潮流的金矿。它可以成为创作性作品的绝佳灵感来源。

最后，这里是一份生成式学习资源清单。这里的内容足够你深入地探索你的生成式学习之旅！

编码列车- 我就是看这个频道学习编程的。Dan 几乎在所有你能想到的生成性主题上都有精彩的视频。
泰勒·霍布斯——泰勒是一位出色的艺术家，他写了一些令人难以置信的散文。这真是一场充满创意的盛宴。
代码的本质——一本关于用代码模拟自然系统的优秀书籍。
我的更多内容！ —— 真是厚颜无耻的宣传。我写过很多生成式教程，如果你喜欢这篇，一定要去看看。

这么久！

感谢您抽出时间阅读这篇文章。希望您学到了一些很棒的新技巧，我迫不及待地想看看您用它们创作出的作品！

如果你真的用这些东西做了什么，请一定要发给我。我最喜欢看大家用我的教程做了什么。这总是比我一开始做的有趣 得多！

喜欢这个教程吗？关注我的 Twitter @georgedoescode ，获取更多前端/创意编程内容🎨

本教程总共花费了大约 10 个小时。如果您想支持我的工作，可以 请我喝杯咖啡。

文章来源：https://dev.to/georgedoescode/a-generative-svg-starter-kit-5cm1