Як я можу створити тестельну шестикутну плитку (для SVG / Web)?


11

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

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

CSS-шаблон. Я хотів би зробити це в Inkscape. Я не впевнений, як "вирізати" візерунок на блоки. Як би я почав це робити?

Шестикутники

EDIT Результат виглядає дуже добре! вихід


Буде корисно, якщо ви зможете вставити посилання на файл Inkscape!
V-Red

Відповіді:


21

Дещо булева хитрість роботи - це досить простий процес.

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

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

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

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

На осі X я вибрав два шестикутники, які були вирівняні. Це були б початок і кінець візерунка, по горизонталі. Наступним чином я вибрав узгоджувальну точку з кожної (у даному випадку найбільш лівої точки). Це означатиме точну ширину відсікаючого прямокутника для візерунка. Далі я робив те саме по вертикалі, використовуючи точки, які я вже вибрав по ширині, як верхні кути обрізного прямокутника візерунка. Як тільки я знайшов відповідні нижні точки, було визначено прямокутник відсікання.

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


2
Якщо ви могли б пояснити ідею того, як ви обрали прямокутну область, ОП може бути в змозі узагальнити це до інших форм.
horatio

Оновлення дійсно добре. Допомагає пояснити поняття.
Діод Дан

Відмінно! Радий, що можу допомогти. :)
Кріс Ленгфорд,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.