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

Точки, кольца и горошек — всё как SVG

Узоры на основе кругов — один из простейших, но самых эффектных элементов дизайна. Они добавляют ритм, игривость и движение, не перетягивая внимание со всей страницы. Этот генератор за один клик выдаёт три популярных варианта:

Режимы узора

• Концентрические кольца — равномерные круги от центра наружу. Чередование цветов даёт эффект мишени; в режиме «только контур» получаете чистое кольцевое искусство, минималистичную текстуру.
• Точечная сетка — классический горошек на идеальной сетке. Регулируйте размер точки и число столбцов — от едва заметной крапинки до яркого ретро-узора.
• Смещённые точки — точки в чередующихся строках со смещением, сот-подобный ритм. Элегантно для фонов и бесшовных текстур.

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

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

Применения

• Hero-фоны и декоративные разделители секций
• Мокапы продуктов и «тканевые» графики
• Состояния загрузки и UI-акценты
• Редакционные декорации для статей
• Контрастные фоны для мобильных экранов

Так как каждый круг — лёгкий <circle>, весь SVG остаётся крошечным и его легко править: меняйте цвета, масштабируйте или помещайте в <pattern> для бесконечного фона.