Генератор анимированных узоров
Создавайте анимированные световые узоры в браузере: изгибайте линии, задавайте цвета и экспортируйте бесшовные циклы в MP4, GIF, PNG или код.
Начните со стиля
Задайте форму линий
Лучше всего подходит PNG или SVG с прозрачным фоном. Файл остаётся на вашем устройстве.
Перетащите четыре узла на картинке, чтобы изогнуть линии.
Перетащите картинку, чтобы сдвинуть центр узора.
Выберите цвета
Цвета линийНастройте движение
Доработайте стиль
Эффект печатиЭкспорт
Экспортируется кадр, показанный на картинке. Чтобы выбрать другой, передвиньте ползунок времени.
Этот браузер не умеет кодировать видео. Используйте последнюю версию Chrome, Edge, Firefox или Safari либо экспортируйте GIF.
В GIF не больше 256 цветов. Для плавных градиентов и небольших файлов экспортируйте видео.
Вставьте этот код на любую веб-страницу, и узор будет работать вживую. Библиотеки не нужны, картинка остаётся чёткой при любом размере и останавливается, когда уходит с экрана.
Узоры из текста и логотипа пока нельзя запускать в виде кода. Экспортируйте их как видео или картинку.
В этом формате нет прозрачности: используется цвет фона.
Для этого инструмента нужен WebGL 2, который в вашем браузере или на устройстве отключён. Включите аппаратное ускорение в настройках браузера или попробуйте другой браузер.
Всё создаётся на вашем устройстве, ничего не загружается.
Saved designs
0О Генератор анимированных узоров
Генератор анимированных узоров: бесплатная студия движущихся световых узоров. Линии цвета рисует ваша видеокарта прямо на лету, поэтому любое изменение видно сразу: веера, туннели, спирали, цветы, карты высот, вращающийся глобус, микросхема и многое другое. Начните с готового стиля, а затем настройте линии, цвета и движение так, чтобы узор подходил вашему бренду.
Линии можно изгибать вручную, пускать по контуру любого слова или логотипа, брать палитру из изображения или вставлять цвета бренда. Каждая анимация состоит из целых циклов, поэтому последний кадр плавно переходит в первый, и цикл не прыгает.
Экспортируйте видео в MP4 или WebM до 4K, GIF или статичное изображение в PNG, JPG или WebP до 8K, с прозрачным фоном, если формат это позволяет. Можно также скопировать код, который запускает узор на любом сайте без библиотек. Всё происходит на вашем устройстве: ничего не загружается.
Как использовать Генератор анимированных узоров
- Выберите стиль для старта или нажмите «Удивите меня», чтобы получить новый дизайн.
- Выберите узор и настройте его линии. Перетащите картинку, чтобы сдвинуть центр, или введите слово, чтобы линии огибали его.
- Выберите палитру, вставьте свои hex-коды или возьмите цвета из изображения.
- Задайте движение, длину цикла и скорость, а затем доработайте стиль: свечение, 3D-трубка, рифлёное стекло или плёночное зерно.
- Выберите форму кадра: 16:9, квадрат, портрет, сторис, баннер или свой размер.
- Экспортируйте видео, GIF или изображение либо скопируйте код, чтобы запустить узор на своём сайте.