Генератор изометрического SVG-узора

Изометрические 3D-кубы как плоский SVG

Изометрические иллюстрации — трёхцветные кубы, сложенные в сетку — узнаваемы мгновенно и удивительно легко собираются в SVG. Этот генератор строит сетку кубов, где каждый куб — это три <polygon>-ромба (верх, лево, право), залитые тремя выбранными цветами.

Как рисуются кубы

Для каждой позиции (столбец, строка) сетки инструмент считает изометрические смещения (cos(30°) по X, sin(30°) по Y), чтобы кубы идеально стыковались. Если включён разброс высот, каждый куб получает случайную высоту стека от 1 до 3 — именно так возникает характерный «город с высоты» вид.

Seed определяет, какие кубы рисуются, какие пропускаются (для пустот) и высоту каждого стека. Нажатие перегенерировать подбирает новые раскладки с той же палитрой.

Элементы управления

• Столбцы / Строки — размер сетки.
• Размер плитки — размер каждого куба.
• Цвет верха / лева / права — три цвета граней. Контрастные оттенки дают глубину.
• Фон — заливка за кубами.
• Разброс высот — включает случайные высоты стеков.

Применения

• Фоны для тем архитектуры и строительства
• Hero-изображения для дата-дашбордов
• Редакционные иллюстрации для статей о недвижимости, городах, блокчейне
• Игровые тайлы (рельеф, городской пейзаж)
• Декор презентационных слайдов

Поскольку каждый куб — группа полигонов, вы можете поштучно менять их цвета через find-and-replace или анимировать CSS для игривых переходов.