Генератор узоров
Создавайте бесшовные SVG-узоры для фона из почти 2000 дизайнов: меняйте цвета, масштаб, интервалы и угол, затем копируйте CSS или скачивайте SVG, PNG, WebP.
1Выберите узор
Нет узоров, подходящих под эти фильтры.
2Выберите цвета
3Настройте узор
4Добавьте анимацию (по желанию)
За один цикл узор сдвигается ровно на одну плитку, поэтому анимация идёт без рывков. Движение сохраняется в коде и в файле SVG; файлы изображений остаются неподвижными.
5Копирование или загрузка
Здесь будет ваш заголовок
Посмотрите, как узор выглядит за настоящим содержимым.
НачатьОбзор по коллекциям
О Генератор узоров
Генератор узоров превращает почти 2000 готовых дизайнов в фоны, которые можно настроить и сразу использовать. Просматривайте 14 коллекций: от волн, горошка и тесселяций до тартанов, японских сэйгайха, исламских звёзд, вееров ар-деко, пиксельных спрайтов и камуфляжа, и смотрите каждый узор в своих цветах.
Каждый дизайн нарисован как векторная графика и повторяется без видимых швов при любом масштабе и любом угле. Меняйте до шести цветов, масштаб, положение, интервалы, толщину линий и угол, превращайте залитые формы в контуры или добавьте узору зацикленную анимацию. Генеративные узоры, такие как топографические карты, ячейки Вороного и плитки Трюше, могут давать новый вариант при каждом нажатии.
Когда результат вас устроит, скопируйте его как CSS, SCSS, конфигурацию Tailwind, встроенный SVG, data URI или компонент React либо скачайте SVG, PNG, JPG или WebP любого размера до 8000 пикселей, в том числе отдельную плитку для собственного повтора. Всё работает в вашем браузере: ничего не загружается на сервер, регистрация не нужна.
Как использовать Генератор узоров
- Выберите узор: ищите по названию или фильтруйте по коллекции и количеству цветов.
- Выберите цвета с помощью палитры, готового набора или кнопки «Новая палитра».
- Настройте масштаб, положение, интервалы, толщину линий и угол. Зафиксируйте любое значение перед нажатием «Вдохновите меня».
- Проверьте результат в режимах «Показать плитку», «На странице» и «В тексте».
- Скопируйте код или скачайте файл, а с помощью «Копировать ссылку» вы сможете позже вернуться именно к этому узору.