Морфинг иконки внутри кнопки svg

Интересно было бы использовать тему плавного морфинга, то есть изменения контуров одной фигуры в контуры другой фигуры в svg кнопках. Дизайн следующий. В начальном состоянии кнопка имеет иконку - желтая звездочка слева и надпись "Сохранить"

При нажатии на кнопку происходит плавный морфинг звездочки в зеленый чекбокс и надпись "Сохранить" меняется на надпись "Сохранено!"

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

Пример иконки чекбокса

Ответ

Немного ответ не по вопросу, а более общий про svg вообще.
По какой-то причине разработчики брезгают руками рисовать и вообще трогать его (как будто боятся jpg в блокноте увидеть). И это касается даже очень крупных компаний.
Взглянем на логотип РБК (ссылка)
Как он выглядит у них и как можно сделать:

Я на глаз делал, может немного промахнулся, но суть в том, что снаружи он квадрат, а точки не из целого числа создают неприятные неровности на по идее ровных краях. В логотипе Яндекса к примеру тоже лишние группы с лишними сттрибутами, с кучей цифр после точки (а ведь реально больше 1 никогда никто не заметит разницы)
Ну вернемся к нашей звезде-чекбоксу. Нет ничего сложного самому нарисовать ее, это не сложнее, чем рисовать ее в тетрадке в клетку:

Чтобы было проще, можно переносить каждую точку на следующую строчку. Я нарисовал обычную советскую звезду в редакторе, как рисовали её в школе, одной линией. Подровнял и получил точки. Кстати теоретически для ровных линий правильнее использовать polygon, тк path подразумевает возможное наличие кривых безье.
Анимация из ответа очень топорная, без души и в середине анимации сильная каша. Открываю редактор, накладываю одну фигуру на другую и смотрю как можно анимировать менее грубо:

var button = document.getElementById("button"), buttonText = document.getElementById("btnText"), animationToStar = document.getElementById("toStar"), animationToCheck = document.getElementById("toCheck"); button.addEventListener('click', function() { if (button.classList.contains("keep")) { button.classList.remove("keep"); animationToStar.beginElement(); buttonText.innerHTML = "Сохранить"; } else { buttonText.innerHTML = "Сохранено!"; button.classList.add("keep"); animationToCheck.beginElement(); } }, false); button { border: 0; background: linear-gradient( to bottom, #444, #111); border-radius: 20px; padding: 10px 30px 12px; width: 235px; outline: 0; display: inline-block; text-align: left; } button:hover, button:active { background: black; } button svg { width: 40px; height: 40px; display: inline-block; vertical-align: middle; margin-right: 10px; } button span { font-size: 22px; position: relative; top: 4px; color: white; } body { padding: 20px; text-align: center; }
Вставляем в пример из ответа, смотрим что можно улучшить по svg. В принципе все в порядке, только анимацию цвета можно запускать на старте анимации шэйпа прямо в svg, это немного лишнего из js выкидывает.