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

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

Содержание

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

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

Medical SVG Icons by kittons

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

Link

Hover by SeanMcCaffery

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

Link

Pull Down to Refresh (Paper Plane) by Nikolay Talanov

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

Just Keep Going by Diaco M. Lotfollahi

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

Ссылка

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

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

Ссылка

Пазл

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

Ссылка

Liner Gradient by Patrick Young

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

Link

Let’s Travel by jjperezaguinaga

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

Ссылка

Clock by Mohamad Mohebifar

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

Ссылка

Анимированные иконки от Luigi De Rosa

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

All Devices in SVG by Chris Gannon

Анимация в один прием, в которой самым креативным образом рассматриваются все умные устройства, которыми мы пользуемся. Настольный компьютер превратится в ноутбук, ноутбук в планшет, а затем в смартфон.

Ссылка

Водопад от Криса Гэннона

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

Link

Plant Generator by Blake Bowen

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

Ссылка

Clickable Icon by Hamish Williams

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

Link

New Cake by Marco Barría

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

Paper Shredder by Chris Gannon

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

Link

Low PolyLion by GRAYGHOST

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

Ссылка

Hourglass Loader by Leela

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

Ссылка

Responsive Cow by Sarah Drasner

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

Студент» от Domany

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

Link