Генератор SVG-образов

Генератор SVG-паттернов создаёт повторяющиеся мозаичные фоны, определяя SVG-элемент <pattern>, заполненный одной повторяющейся формой. Он предлагает шесть типов форм (круги, квадраты, треугольники, линии, крестики и ромбы), нарисованные как контурные примитивы, затем располагает их мозаикой по предпросмотру 200x200 и экспортирует полную разметку SVG для использования на веб-страницах, в CSS-фонах или файлах дизайна.

1. Выберите Тип паттерна из шести кнопок. 2. Настройте ползунок Размера (от 10 до 60px), чтобы задать размеры плитки и масштаб формы. 3. Настройте ползунок Толщины обвода (от 0,5 до 6,0). 4. Используйте Поворот (от 0 до 360 градусов с шагом 5 градусов) для поворота плитки через patternTransform. 5. Установите Цвет формы и Цвет фона, используя два образца цвета. 6. Нажмите Копировать, чтобы скопировать сгенерированный SVG в буфер обмена.

Экспортируемый SVG имеет размер 200x200 с блоком <defs><pattern>, использующим patternUnits="userSpaceOnUse". Ширина и высота паттерна равны значению Размера, поэтому каждая плитка повторяется в сетке этого размера. Сначала рисуется фоновый <rect>, заполненный цветом фона, затем второй <rect>, заполненный url(#pat), накладывает плитки. Если поворот не равен нулю, он применяется и как patternTransform к паттерну, и как преобразование rotate() к самой форме.