Добрый день.
Вопрос заключается в том как сделать плавный переход или почему в моем примере переход не происходит плавно.
В свое время уже был ответ
Анимация SVG, как сделать плавность?
Сделал как там + пробовал через @keyframes все тщетно.
Ниже приведен мой пример.
<svg viewBox="0 0 100.7 229.7">
<path class="st0" d="M41,12h21c0,0-13,25-12,60s13.7,43.5,14,72c0.4,40.7-12.5,76.5-12.5,76.5s7.1-33.7,2.3-75.1C50.7,117.7,37,105,35,71S41,12,41,12z">
<animate
attributeName="d"
from="M41,12h21c0,0-13,25-12,60s13.7,43.5,14,72c0.4,40.7-12.5,76.5-12.5,76.5s7.1-33.7,2.3-75.1C50.7,117.7,37,105,35,71S41,12,41,12z"
to="M57.7,12h-21c0,0,13,25,12,60s-13.7,43.5-14,72c-0.4,40.7,12.5,76.5,12.5,76.5s-7.1-33.7-2.3-75.1C48,117.7,61.7,105,63.7,71C65.7,37,57.7,12,57.7,12z"
begin="mouseover"
end="mouseout"
dur="3s"
/>
</path>
</svg>
