Генератор SVG-паттернов для фона с живым предпросмотром
Выберите бесшовный SVG-паттерн и смотрите, как он обновляется вживую при изменении цвета и прозрачности - синхронизирован с текущей палитрой, а не отдельный статичный образец.
SVG-паттерн для фона - это небольшая векторная картинка, которая бесшовно повторяется в виде CSS background-image. В отличие от растрового PNG, SVG остаётся чётким на любом разрешении экрана, весит совсем немного и легко перекрашивается без пересборки файла. Наш генератор идёт дальше: каждый паттерн обновляется вживую при выборе цвета и сразу подхватывает цвета из вашей текущей палитры - не нужно вручную подбирать сочетание для фона.
background-color: #e4e4e3;
Сетка
Ромб
Волны
Зигзаг
Линии
Круги
Геометрия
Частые вопросы
Как использовать сгенерированный SVG-паттерн как CSS-фон?
Скопируйте код из блока «CSS этого фона» под превью - там уже готовы background-color и background-image с паттерном в виде data URI, который можно вставить в любой файл стилей. Отдельный файл подключать не нужно:
.element {
background-color: #f5f5f5;
background-image: url("data:image/svg+xml,...");
}Чем seamless-паттерн отличается от обычного изображения?
Бесшовный (seamless) паттерн устроен так, что его края совпадают друг с другом при повторении - стыка между копиями не видно. Обычная фотография или иллюстрация при повторении дала бы заметный шов и очевидный повтор, а SVG-паттерн сливается в один непрерывный фон на любой площади.
Можно ли менять цвета паттерна и привязан ли он к палитре?
Да - цвет паттерна, цвет фона и прозрачность настраиваются отдельно через цветовые пикеры выше. По умолчанию паттерн берёт цвет из вашей текущей палитры, но его можно заменить на любой hex вручную.
Это бесплатно и нужна ли регистрация?
Полностью бесплатно, регистрация не нужна. Выберите паттерн, настройте цвета и скопируйте CSS или экспортируйте SVG.