如何创建平铺六边形镶嵌(用于 SVG/Web)?

平面设计 墨景 svg 模式
2022-01-12 07:27:28

我正在寻找使用类似于下图的镶嵌图案的正六边形为网页创建SVG 背景图像。但是,我需要六边形互连,以便我可以使用:

background-image: url("path-to-hex.svg");

CSS 模式。我想在 Inkscape 中执行此操作。我不确定如何将模式“切割”成块。我将如何开始这样做?

六边形

编辑 结果出来看起来真的很好! 输出

1个回答

通过一些布尔运算技巧,这是一个非常简单的过程。

在此处输入图像描述

只需拿一组你在那里的六边形,创建一个与我在上图中得到的橙色相匹配的矩形(确保角捕捉到六边形上的适当点),然后使用相交工具得到摆脱矩形之外的所有内容。那应该给你一个平铺的模式。

编辑:根据 horatio 的评论(好电话!),我想我应该解释一下我是如何在那个特定的矩形上定居的。创建图块时,您需要让图案的每个部分在所述图块中至少出现一次(理想情况下,不超过一次)。通过这种模式,我查看了 x 或 y 轴上是否有任何重复点;对我来说幸运的是,六边形的角度并不奇怪,所以这让事情变得相对容易。

在此处输入图像描述

在 X 轴上,我选择了两个对齐的六边形。这些将是水平方向的模式的开始和结束。接下来,我从每个点中选择了一个匹配点(在本例中为最左边的点)。这将标记图案的剪切矩形的确切宽度。接下来,我垂直地做同样的事情,使用我已经为宽度选择的点作为图案剪切矩形的顶角。一旦我找到匹配的较低点,就定义了剪切矩形。

您可以在任意数量的形状上使用此技术。您也可以在六边形(或其他形状)上以一定角度使用它,但请记住,根据角度,瓷砖会变得更大。