20 фантастических примеров SVG-анимации

Масштабируемая векторная графика (SVG) — это формат изображения, написанный на XML. С помощью SVG вы можете кодировать двумерную масштабируемую графику. Затем вы можете реализовать и изменить их в CSS и JavaScript.

SVG допускает три типа графики: векторные фигуры (прямые и изогнутые линии во всех направлениях и формах), изображения и текст. Из-за его разнообразных возможностей веб-дизайнеры обращаются к SVG для создания сложных анимаций. Их легко установить, они не теряют качество при изменении размера и не требуют для работы никаких сторонних приложений.

Поскольку популярность анимации все еще растет, большинство с ней не знакомо. В этой статье мы расскажем о 20 фантастических SVG-анимациях, демонстрирующих потенциал этого формата.

1. Медицинские иконки SVG от kittons

Эта теплая и плавная анимация отлично подходит для любого веб-сайта, посвященного здоровью. Пока вы перечисляете разные темы, изображения будут незаметно появляться. Построит машину скорой помощи или атом, глаз откроется, и выскочит доктор. Эта анимация показывает все веселье и динамизм SVG.

Ссылка на сайт

2. Hover от SeanMcCaffery

Универсальная анимация, которую можно поставить на любой интерактивный сайт. Тонкий внешний вид границ при наведении курсора оставляет приятное ощущение и приглашает щелкнуть ссылку.

Ссылка на сайт

3. Потяните вниз, чтобы обновить (Paper Plane) Николая Таланова

Обычно страницы обновляются, когда вы «тянете» их вниз. Эта анимация выводит это на новый уровень. Когда вы потянете вниз, чтобы освободить его, вы запустите бумажный самолетик в небо. Если вы хотите, чтобы ваши посетители часто обновляли ваше приложение, вам следует подумать о добавлении такой анимации.

4. «Просто продолжай», Диако М. Лотфоллахи

Анимация SVG, показывающая потенциал вектора масштабирования. Плавное аккуратное движение человеческого тела гипнотизирует.

Ссылка на сайт

5. Фильтры SVG, добавленные к видео HTML5

Пол Айриш из команды Google Chrome рассмотрел, как SVG может изменять контент за пределами векторной графики. Он объединил CSS и SVG, чтобы создать удивительные визуальные фильтры, чтобы показать, что анимация SVG может быть прекрасным дополнением к готовому видео.

Ссылка на сайт

6. Головоломка

Вы можете создавать удивительные интерактивные пазлы с анимацией SVG. В этом примере мы можем выбрать одну из множества картинок и посмотреть, как она разбивается на множество маленьких кусочков головоломки. Вы также можете восстановить его!

Ссылка на сайт

7. Liner Gradient от Патрика Янга

Если вам нравятся неоновые огни и красивые шрифты, вам понравится эта анимация. Эта работа показывает, как вам не нужны движущиеся линии для блестящей анимации, только отличный шрифт и правильный цветовой код с эффектом градиента.

Ссылка на сайт

8. Let's Travel от jjperezaguinaga

Два самолета и воздушный шар вращаются вокруг популярных достопримечательностей мира. Эта анимация красочна, оптимистична и умопомрачительна. Он показывает все, что вы можете сделать, если хорошо разбираетесь в SVG.

Ссылка на сайт

9. Часы Мохамада Мохебифара

Простая SVG-анимация движущихся часов, показывающая текущее время. Успокаивающие движения указателей и минималистичный дизайн творят чудеса с этой анимацией.

Ссылка на сайт

10. Анимированные иконки Луиджи Де Росы

Если вы наведете курсор на эти значки, вы запустите анимацию, которая проста, но эффективна. Вы можете видеть, что вам не нужно творить чудеса, чтобы сделать впечатляющую анимированную иконку.

11. Все устройства в SVG Криса Гэннона

Однократная анимация, которая самым креативным образом проходит через все смарт-устройства, которые мы используем. Десктоп превратится в ноутбук, ноутбук в планшет, потом в смартфон.

Ссылка на сайт

12. «Водопад» Криса Гэннона

Еще один снимок Криса Гэннона, это аккуратная демонстрация пенящегося дна водопада. Движение воды аккуратное, и вы можете видеть, как маленькие капли брызг воды покидают границы анимации, чтобы все выглядело более реалистично.

Ссылка на сайт

13. Генератор растений Блейка Боуэна

Теперь это что-то другое. Когда вы нажмете кнопку «Создать», вы увидите, как растут и растут растения. Но каждый раз, когда вы нажимаете, формируются разные узоры.

Ссылка на сайт

14. Кликабельная иконка от Хэмиша Уильямса

Еще один интерактивный SVG, запускающий анимацию при нажатии на него. Это запустит анимацию «Отправить», как только вы нажмете на нее.

Ссылка на сайт

15. Новый торт от Марко Барриа

Интересная анимация, показывающая изготовление торта слой за слоем. Это впечатляющая SVG-анимация, подходящая для поздравительной открытки.

16. Уничтожитель бумаги Криса Гэннона

Если вам нравится наблюдать за измельчением бумаги, вам понравится эта анимация, в которой машина измельчает бумагу за бумагой неограниченное количество раз в непрерывной последовательности.

Ссылка на сайт

17. Низкополигональный лев от GRAYGHOST

Это умопомрачительная иллюстрация и анимация, изображающая голову льва, появляющуюся и исчезающую в виде анимированных многоугольников.

Ссылка на сайт

18. Загрузчик песочных часов от Лилы

Еще одна эффективная анимация, использующая только SVG. Каждые 5 секунд песочные часы переворачиваются и начинают новый цикл.

Ссылка на сайт

19. «Отзывчивая корова», Сара Драснер

Это забавная интерактивная анимация, которая позволяет вам нажать на корову и перетащить ее вокруг Луны, пока на нее смотрит сбитый с толку космонавт.

20. «Студент» Домани

Увлеченный ученик готов учиться! Это отличная анимация, где страницы книги аккуратно переворачиваются. Ученик не моргает, но это все еще совершенно аккуратная анимация, чтобы завершить этот список.

Ссылка на сайт

Твоя очередь

Какие ваши любимые SVG-анимации не включены в этот список? Поделитесь своим выбором в комментариях ниже!