30 Потрясающая анимация SVG для вашего вдохновения

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

Работая с SVG, мы наслаждаемся хорошим поддержкой браузера для SVG-анимации, и у нас есть больше способов для создания новой анимации. Вы можете использовать как встроенную функциональность SVG-анимации, так и CSS3-анимацию (обратите внимание, что не все может быть сделано с помощью CSS, поэтому все еще требуется JavaScript). Другой способ заключается в использовании JavaScript-движков, таких как GSAP или Snap. JS - хорошая практика для создания анимации.

Здесь я собрал несколько удивительных анимированных SVG. Некоторые используют SVG-анимацию, другие используют CSS-преобразование для базовой анимации, а другие используют JavaScript.

Анимация границ Шоном Маккафери

Сделано только с помощью CSS, граница вокруг текста плавно формируется, когда вы наводите курсор мыши на “НАВЕДЕНИЕ” инструкция.

Эластичная боковая панель SVG by Николай Таланов

Боковая панель становится упругой, когда вы пытаетесь отвести ее в сторону. Хорошая концепция, примененная на боковой панели приложения, вдохновленной Material Design.

«Потяните, чтобы обновить» Николай Таланов

Большинство страниц позволяют вам “тянуть вниз” на странице, чтобы обновить. С этой анимацией, когда вы “релиз” На странице значок «Отправить» превращается в значок «Самолет» и выпускается в эфир..

Анимированный градиент на текст Патрика Янга

Вот тонкий, но не легко пропустить движущийся градиент текста, который полюбят любители типографики.

Анимация сердца Николая Таланова

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

Путешествуем по jjperezaguinaga

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

Меню переключения анимации Тамино Мартиниуса

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

Анимированная инфографика от Sdras

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

Rain-Bros не любят JS от cihadturhan

Уникальный и забавный цикл анимации, изображающий ход персонажей. Движение объектов в этой демонстрации представляет собой сочетание анимации SVG и CSS3. Ноги используют SVG-анимацию, в то время как другие части используют CSS3-анимацию.

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

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

Радужный Человек Ракеты Крисом Гэнноном

Космонавт, стреляющий в космос с помощью реактивного ранца с питанием от радуги (?). Хорошая анимация с использованием плагина GSAP Tweenmax.

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

Однако поверх этих анимированных иконок SVG можно посмотреть, на что они способны. Создатель сделал это с помощью GSAP.

Плоское рабочее пространство Hoàng Nhật

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

Активируемая анимационная иконка Хэмиша Уильямса

Эта классная анимация использует библиотеку snap.svg. Нажмите, чтобы увидеть почту “послал”.

Дайвинг от Криса Гэннона

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

Движение для сети от LegoMushroom

У него есть анимация, приятная мелодия, супер классный вход для текста, что не нравится? Это построено с помощью mo.js, библиотеки JavaScript с графикой движения.

Анимированный шрифт написания Ли Портер

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

Gooey меню от Лукаса Беббера

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

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

Как сделать многослойный торт на день рождения из SVG и CSS анимации.

Спасибо Рэйчел Смит

Просто посмотрите на эту удивительную анимацию простого благодарственного письма. Он создан с использованием SVG и библиотеки GSAP TweenMax.

CSS против SVG Марио Санчес Маселли

Теперь давайте посмотрим сравнение CSS и SVG анимации, видите ли вы разницу?

Прогулка с собакой Марка Нельсона

Другой способ оживить SVG - использовать изображения спрайтов, например, как это сделал создатель..

Загрузчик песочных часов Leela

Творческая работа, выполненная с использованием чистой SVG-анимации (SMIL); здесь нет CSS или JS для анимации.

Анимация логотипа Адема Илтера

Вот хорошее анимированное вступление логотипа с использованием встроенной SVG-анимации. Никакие CSS или JS не использовались, чтобы все работало.

Анимация статистики Джонаса Бадалича

Красивый график статистики с SVG-анимацией на основе библиотеки Snap.SVG.

Уроборос Ноэль Дельгадо

Удивительный путь анимации SVG. Сначала создатель нарисовал маршрут пути в SVG, прежде чем использовать tween.js для добавления анимации.

Креативные Gooey Effects от Лукаса Беббера

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

Бросай корову от Сары Драснер

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

Анимированный логотип Али

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