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


11

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

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

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

Шестигранники

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


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

Ответы:


21

С небольшой хитростью в булевых операциях это довольно простой процесс.

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

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

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

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

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

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


2
Если бы вы могли объяснить идею того, как вы выбрали прямоугольную область, ОП мог бы обобщить это на другие формы.
Горацио

Обновление действительно хорошее. Помогает объяснить концепцию.
Диод Дан

Отлично! Рад, что смог помочь. :)
Крис Лэнгфорд
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.