chevron_right

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

Создавайте 3D-подобные изометрические узоры из кубов в виде SVG — идеально для современных фонов, тайлов для игр и архитектурных иллюстраций.

Сетка

Столбцы: 6

Строки: 6

Размер плитки: 40

Цвета

Верх

Лево

Право

Фон

Случайные высоты

Seed

Сгенерированный код

codeSVG

brushCSS

xml

css

Похожие инструменты

Генератор кругового SVG-узора

Создавайте декоративные SVG-узоры из концентрических колец, точечных сеток или смещённых точек в стиле сот.

Генератор облаков SVG

Создавайте стилизованные SVG-облака — пушистые, мультяшные, минималистичные и пиксельные — с настраиваемыми цветами, градиентами и размерами. Идеально для иллюстраций, погодных UI и фонов.

Генератор узора вихря SVG

Создавайте закрученные SVG-узоры вихря с витыми радиальными лопастями. Гипнотические спирали, фоны-водовороты и калейдоскопические иллюстрации бесплатно и без загрузки.

Генератор узоров зигзаг SVG

Создавайте SVG-узоры зигзаг и шеврон с настраиваемой амплитудой, длиной волны, межрядовым интервалом и толщиной линии. Идеально для ретро-текстиля, ярких фонов и геометрических наложений.

Генератор Markdown-таблиц

Создавайте Markdown-таблицы из простых заголовков и строк, разделенных запятыми.

Генератор безопасных токенов

Создавайте криптографически безопасные токены в формате hex, base64 или base64url с помощью Web Crypto API.

Обфускатор Email

Спрячьте email от спам-ботов, сохранив читаемость для людей. Несколько методов.

apps

Больше инструментов

Просмотрите нашу полную коллекцию бесплатных онлайн-инструментов.

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

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

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

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

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

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

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

Применения

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

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