Как самостоятельно сделать анимацию SVG иконки

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

Растровая иконка образец

Техника создания векторной иконки и её анимации

Шаг #1. Загрузка в векторный редактор растрового изображения

Загружаем в векторный редактор растровое изображение иконки и наносим узловые точки по контурам рисунка.

inkscape-face

Сохраняем файл в формате *.svg

Ниже получившийся код векторной иконки

Шаг #2. Анимация вращения глаз (зрачка)

Добавляем к path анимацию:

Анимация вращения начнется после наведения курсора на иконку

Шаг #3. Анимация вращения языка

⇚ Иконка разбитое сердце
Следующая ⇛  Позиционирование иконок SVG

Добавить комментарий