SVG меню с анимацией morphSVG при наведении

Question

Я хочу создать меню SVG, которое при наведении курсора меняет текст с одного SVG на другой и искажает типографику.

У меня есть 3 вопроса:

1) Как я могу добавить необходимый код, чтобы анимация работала при наведении, а не автоматически, как сейчас, используя «for» для работы по разным путям, а не только по одному.

2) Как сделать так, чтобы гиперссылка работала только с областью текста, а не со всей областью SVG. Я пробовал использовать встроенные блоки, но он не работает, и теперь гиперссылка намного больше текста.

3) Как вы можете видеть из моего второго примера, который работает, L искажается нормально, когда находится внутри того же пути, что и другие буквы, но когда идет по одному пути, анимация этой буквы очень странная. Есть ли способ решить эту проблему?

Я открыт, чтобы узнать, есть ли другой способ сделать это без morphSVG.

У меня уже есть пример анимации и ссылка: https://codepen.io/MZBS/pen/ZdPOmg

var button2 = document.getElementById("toggle2");
for (i = 0; i < 5; i++) {
  TweenMax.to("#start" + i, 1, {
    morphSVG: "#end" + i,
    yoyo: true,
    repeat: -1,
    repeatDelay: 0.5,
    ease: Power1.easeInOut
  });
}

Я пробовал раньше с одним путем на слово, но мне нужны разные пути для правильной работы. Итак, у меня есть этот пример, который на самом деле работает, но мне нужно сделать это с другим, прежде чем: https://codepen.io/MZBS/pen/GbPOMd

var button2 = document.getElementById("toggle2");


var morph = new TimelineMax({paused:true});
morph.to("#gear", 1, { morphSVG: "#x", ease:Power1.easeInOut });

button2.addEventListener("mouseenter", function() {
  if (morph.progress() === 0) { //if it's at the beginning, start playing
    morph.play();
  } else { //otherwise toggle the direction on-the-fly
    morph.reversed( !morph.reversed() );
  }
});

Итак, в конце мне нужна последняя анимация, работающая с разными путями, как в моем первом примере, как hover.