Как создать мозаичную шестиугольную мозаику (для SVG/Web)?

Я хочу создать фоновое изображение SVG для веб-страницы, используя правильные шестиугольники в шаблоне тесселяции, подобном изображению ниже. Однако мне нужно, чтобы шестиугольники соединялись, чтобы я мог использовать:

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

Шаблон CSS. Я хотел бы сделать это в Inkscape. Я не уверен, как «разрезать» шаблон на блоки. Как мне начать это делать?

Шестиугольники

РЕДАКТИРОВАТЬ Результат вышел очень хорошим!выход

Было бы полезно, если бы вы могли вставить ссылку на файл inkscape!

Ответы (1)

С небольшим количеством логических операций это довольно простой процесс.

введите описание изображения здесь

Просто возьмите набор шестиугольников, которые у вас есть, создайте прямоугольник, который соответствует оранжевому прямоугольнику, который у меня есть на изображении выше (убедитесь, что углы привязываются к соответствующим точкам шестиугольников), а затем используйте инструмент пересечения, чтобы получить избавиться от всего, что находится за пределами прямоугольника. Это должно оставить вас с мозаичным узором.

Редактировать: Согласно комментарию Горацио (хороший звонок!), Я решил, что должен объяснить, как я остановился на этом конкретном прямоугольнике. При создании плитки вам нужно, чтобы каждая часть вашего узора появлялась в указанной плитке хотя бы один раз (и в идеале не более одного раза). С помощью этого шаблона я посмотрел, есть ли какие-либо повторяющиеся точки на оси x или y; к счастью для меня, шестиугольники не расположены под странным углом, так что это упростило задачу.

введите описание изображения здесь

На оси X я выбрал два шестиугольника, которые были выровнены. Это будет начало и конец узора по горизонтали. Затем я выбрал совпадающую точку из каждой (в данном случае самую левую точку). Это будет обозначать точную ширину прямоугольника отсечения для шаблона. Затем я сделал то же самое по вертикали, используя точки, которые я уже выбрал для ширины, в качестве верхних углов прямоугольника обрезки узора. Как только я нашел совпадающие нижние точки, прямоугольник отсечения был определен.

Вы можете использовать эту технику для любого количества фигур. Вы также можете использовать его на шестиугольниках (или других формах) под углом, но имейте в виду, что плитка станет значительно больше в зависимости от угла.

Если бы вы могли объяснить идею того, как вы выбрали прямоугольную область, ОП мог бы обобщить это на другие формы.
Обновление действительно хорошее. Помогает объяснить концепцию.
Превосходно! Рад, что смог помочь. :)