Идея этой анимации навеяна великолепным докладом Владимира Кузнецова об использовании SVG в сайтостроении. Иконка – “разбитое сердце” составлена из двух половинок, которые нарисованы с помощью двух путей – path. Анимация происходит за счет вращения – ‘rotate’ этих путей в разные стороны, относительно одной общей точки. Как нарисовать в векторном редакторе эти половинки сердца, чтобы они идеально, без шва соединялись друг с другом, я расскажу в отдельной статье.

Ниже код левой и правой половинок иконки.

Добавляем анимацию к каждой половинке иконки. Правая половинка должна повернуться на некоторый угол вправо – values=”0 50 75; 7 50 75″, в нашем примере угол поворота по часовой стрелке от “0” до “7” градусов (первая цифра из трех в двух группах цифр, разделенных точкой с запятой в атрибуте ‘values’), соответственно левая половинка иконки должна вращаться влево, против часовой стрелки, поэтому значение угла поворота будет отрицательным от “0” до “-7” – values=”0 50 75; -7 50 75″

Обратите внимание, что после добавления команды анимации внутрь тэга <path> он из одинарного должен превратиться в парный тэг – <path>…</path> Подробнее здесь.
begin=”heart.click” – начало анимации после клика по видимой части SVG, взгляните на первую строчку листинга выше – <svg id=”heart”> Это сделано для того, чтобы анимация левой и правой половинки иконки начиналась одновременно, так как id=”heart” это общая область просмотра для обоих половинок иконки.
dur=”1s” – продолжительности анимации – 1 секунда.
repeatCount=”1″ – повторение один раз.
values=”0 50 75.7;-7 50 75.7″ – первая цифра начальный угол поворота, вторая и третья цифры – координаты точки, относительно, которой происходит поворот. После точки с запятой конечное значение угла поворота, координаты точки те же.
fill=”freeze” – после завершения анимации изображение ‘замерзает’.
restart=”whenNotActive” – запрет повторного запуска анимации пока не закончится текущая анимация.
*.Svg файл готов с работающей анимацией, теперь его можно клонировать, масштабировать, стилизовать.
Добавляем *.svg файлы с иконками в Html страницу с помощью ‘object’ для того, чтобы иконки были интерактивны. Подробнее здесь.

Все иконки кликабельны.

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

begin=”heart.click” – первая анимация – раскол иконки, начинается после клика мышкой по иконке или любому месту рядом с ней.
begin=”break.end+3s” – вторая анимация – склеивание половинок, начинается после окончания первой анимации, имеющей уникальный идентификатор – id=”break”, плюс 3 секунды паузы.

Все иконки кликабельны.