Плавная трансформация path относительно определенной точки

Question

Необходимо анимировать path из первого состояния во второе (как показано на изображении).

Анимацию реализовал на Snap.svg:

s = Snap(485, 788);
var path = s.path("M235.4 216.8c-27.1-8.1-47.8-53.5-47.8-108.3 0-42.7 12.6-79.7 31-97.8C228.7 1.5 235-11.7 235-26.5c0-27.8-22.5-50.3-50.3-50.3s-50.3 22.5-50.3 50.3c0 14.7 6.3 28 16.4 37.2 18.4 18.1 31 55.1 31 97.8 0 54.8-20.7 100.2-47.8 108.3C56.6 238.8 0 310 0 394.4 0 496.4 82.7 579 184.7 579s184.7-82.7 184.7-184.7c-.1-84.3-56.7-155.5-134-177.5z").transform('r35.9,184,394');
setTimeout(function() {
    path.animate({ d: "M201.6 210.5c-8-.7-14-4-14-8 0-3.1 3.7-5.8 9.1-7.2 22-5.4 38.3-25.2 38.3-48.9 0-27.8-22.5-50.3-50.3-50.3s-50.3 22.5-50.3 50.3c0 23.6 16.3 43.5 38.3 48.9 5.4 1.4 9.1 4.1 9.1 7.2 0 4-6 7.3-14 8C73.7 219.1 0 298.1 0 394.4 0 496.4 82.7 579 184.7 579s184.7-82.7 184.7-184.7c-.1-96.2-73.8-175.2-167.8-183.8z" }, 1001,mina.linear).transform('r90,184,394');
},1000);
setTimeout(function() {
    path.animate({ d: "M235.4 216.8c-27.1-8.1-47.8-53.5-47.8-108.3 0-42.7 12.6-79.7 31-97.8C228.7 1.5 235-11.7 235-26.5c0-27.8-22.5-50.3-50.3-50.3s-50.3 22.5-50.3 50.3c0 14.7 6.3 28 16.4 37.2 18.4 18.1 31 55.1 31 97.8 0 54.8-20.7 100.2-47.8 108.3C56.6 238.8 0 310 0 394.4 0 496.4 82.7 579 184.7 579s184.7-82.7 184.7-184.7c-.1-84.3-56.7-155.5-134-177.5z" }, 1000,mina.linear).transform('r35.9,184,394');
},2500);
setTimeout(function() {
    path.animate({ d: "M201.6 210.5c-8-.7-14-4-14-8 0-3.1 3.7-5.8 9.1-7.2 22-5.4 38.3-25.2 38.3-48.9 0-27.8-22.5-50.3-50.3-50.3s-50.3 22.5-50.3 50.3c0 23.6 16.3 43.5 38.3 48.9 5.4 1.4 9.1 4.1 9.1 7.2 0 4-6 7.3-14 8C73.7 219.1 0 298.1 0 394.4 0 496.4 82.7 579 184.7 579s184.7-82.7 184.7-184.7c-.1-96.2-73.8-175.2-167.8-183.8z" }, 1000,mina.linear).transform('r90,184,394');
},5000);
setTimeout(function() {
    path.animate({ d: "M235.4 216.8c-27.1-8.1-47.8-53.5-47.8-108.3 0-42.7 12.6-79.7 31-97.8C228.7 1.5 235-11.7 235-26.5c0-27.8-22.5-50.3-50.3-50.3s-50.3 22.5-50.3 50.3c0 14.7 6.3 28 16.4 37.2 18.4 18.1 31 55.1 31 97.8 0 54.8-20.7 100.2-47.8 108.3C56.6 238.8 0 310 0 394.4 0 496.4 82.7 579 184.7 579s184.7-82.7 184.7-184.7c-.1-84.3-56.7-155.5-134-177.5z" }, 1000,mina.linear).transform('r144.1,184,394');
},7500);

path {
  transition:transform 1s linear; 
}

<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>

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

Как можно решить эту проблему?
Возможно, есть другие варианты такой трансформации для path?

Код svg с дефолтными состояниями фигур:

<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 485 788" xml:space="preserve"><style>.st0{fill:#000}</style><path class="st0" d="M235.4 216.8c-27.1-8.1-47.8-53.5-47.8-108.3 0-42.7 12.6-79.7 31-97.8C228.7 1.5 235-11.7 235-26.5c0-27.8-22.5-50.3-50.3-50.3s-50.3 22.5-50.3 50.3c0 14.7 6.3 28 16.4 37.2 18.4 18.1 31 55.1 31 97.8 0 54.8-20.7 100.2-47.8 108.3C56.6 238.8 0 310 0 394.4 0 496.4 82.7 579 184.7 579s184.7-82.7 184.7-184.7c-.1-84.3-56.7-155.5-134-177.5z"/><path class="st0" d="M369.3 394.4c0 102-82.7 184.7-184.7 184.7S0 496.4 0 394.4c0-96.3 73.7-175.3 167.7-183.9 8-.7 14-4 14-8 0-3.1-3.7-5.8-9.1-7.2-22-5.4-38.3-25.2-38.3-48.9 0-27.8 22.5-50.3 50.3-50.3s50.3 22.5 50.3 50.3c0 23.6-16.3 43.5-38.3 48.9-5.4 1.4-9.1 4.1-9.1 7.2 0 4 6 7.3 14 8 94.1 8.6 167.8 87.6 167.8 183.9zM177.2-76.8h15-15z"/></svg>

Answer 1

Более сложная анимация с градиентами

1. Анимацию многократного вращения фигуры туда и обратно можно реализовать добавлением и чередованием path начального и конечного состояния контуров.

2. Анимация радиального градиента достигается путем изменения атрибута fy

<radialGradient id="rg" r="1" fy=0.1 fx="0.5">
              <stop offset="15%" stop-color="red"></stop>
              <stop offset="100%" stop-color="#000"></stop>
           <animate attributeName="fy"
              begin="svg1.click"
              dur="5s"
              values="0.1;0.65;0.65;0.1;0.1"
              fill="freeze"
              repeatCount="indefinite" /> 
</radialGradient>  

Ниже полный код:

<style>
 .container {
 width:25vw;
 height:25vh;
 }
</style>
<div class="container">
<svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 525 788" >
<defs>
   <radialGradient id="rg" r="1" fy=0.1 fx="0.5">
              <stop offset="15%" stop-color="red"></stop>
              <stop offset="100%" stop-color="#000"></stop>
             <animate attributeName="fy" begin="svg1.click" dur="5s" values="0.1;0.65;0.65;0.1;0.1" fill="freeze" repeatCount="indefinite" /> 
            </radialGradient>
  </defs>
<g>
<path fill="url(#rg)" d="m 240.12204,416.30598 c -27.1,-8.1 -47.8,-53.5 -47.8,-108.3 0,-42.7 12.6,-79.7 31,-97.8 10.1,-9.2 16.4,-22.4 16.4,-37.2 0,-27.8 -22.5,-50.3 -50.3,-50.3 -27.8,0 -50.3,22.5 -50.3,50.3 0,14.7 6.3,28 16.4,37.2 18.4,18.1 31,55.1 31,97.8 0,54.8 -20.7,100.2 -47.8,108.3 -77.400005,22 -134.0000049,93.2 -134.0000049,177.6 0,102 82.6999999,184.6 184.7000049,184.6 102,0 184.7,-82.7 184.7,-184.7 -0.1,-84.3 -56.7,-155.5 -134,-177.5 z">
 <animate
         attributeName="d"
         begin="svg1.click"
         dur="5s"
         fill="freeze"
         repeatCount="indefinite"
         values="
           m 240.12204,416.30598 c -27.1,-8.1 -47.8,-53.5 -47.8,-108.3 0,-42.7 12.6,-79.7 31,-97.8 10.1,-9.2 16.4,-22.4 16.4,-37.2 0,-27.8 -22.5,-50.3 -50.3,-50.3 -27.8,0 -50.3,22.5 -50.3,50.3 0,14.7 6.3,28 16.4,37.2 18.4,18.1 31,55.1 31,97.8 0,54.8 -20.7,100.2 -47.8,108.3 -77.400005,22 -134.0000049,93.2 -134.0000049,177.6 0,102 82.6999999,184.6 184.7000049,184.6 102,0 184.7,-82.7 184.7,-184.7 -0.1,-84.3 -56.7,-155.5 -134,-177.5 z;
       m 240.12204,416.30598 c -27.1,-10.46102 -43.91523,-2.47822 -43.8,-11.25127 0.34539,-26.29667 6.93051,-2.31441 28.66949,-28.34449 10.1,-9.2 14.73051,-24.90424 14.73051,-39.70424 0,-27.8 -22.5,-50.3 -50.3,-50.3 -27.8,0 -50.3,22.5 -50.3,50.3 0,14.7 5.46525,30.08686 15.56525,39.28686 25.49534,27.2822 26.40809,2.64711 27.83475,28.17161 0.55574,9.94276 -16.7,-0.39025 -43.8,11.84153 -77.400005,22 -134.0000049,93.2 -134.0000049,177.6 0,102 82.6999999,184.6 184.7000049,184.6 102,0 184.7,-82.7 184.7,-184.7 -0.1,-84.3 -56.7,-155.5 -134,-177.5 z;

       m 240.12204,416.30598 c -27.1,-10.46102 -43.91523,-2.47822 -43.8,-11.25127 0.34539,-26.29667 6.93051,-2.31441 28.66949,-28.34449 10.1,-9.2 14.73051,-24.90424 14.73051,-39.70424 0,-27.8 -22.5,-50.3 -50.3,-50.3 -27.8,0 -50.3,22.5 -50.3,50.3 0,14.7 5.46525,30.08686 15.56525,39.28686 25.49534,27.2822 26.40809,2.64711 27.83475,28.17161 0.55574,9.94276 -16.7,-0.39025 -43.8,11.84153 -77.400005,22 -134.0000049,93.2 -134.0000049,177.6 0,102 82.6999999,184.6 184.7000049,184.6 102,0 184.7,-82.7 184.7,-184.7 -0.1,-84.3 -56.7,-155.5 -134,-177.5 z;

       m 240.12204,416.30598 c -27.1,-8.1 -47.8,-53.5 -47.8,-108.3 0,-42.7 12.6,-79.7 31,-97.8 10.1,-9.2 16.4,-22.4 16.4,-37.2 0,-27.8 -22.5,-50.3 -50.3,-50.3 -27.8,0 -50.3,22.5 -50.3,50.3 0,14.7 6.3,28 16.4,37.2 18.4,18.1 31,55.1 31,97.8 0,54.8 -20.7,100.2 -47.8,108.3 -77.400005,22 -134.0000049,93.2 -134.0000049,177.6 0,102 82.6999999,184.6 184.7000049,184.6 102,0 184.7,-82.7 184.7,-184.7 -0.1,-84.3 -56.7,-155.5 -134,-177.5 z;

       m 240.12204,416.30598 c -27.1,-8.1 -47.8,-53.5 -47.8,-108.3 0,-42.7 12.6,-79.7 31,-97.8 10.1,-9.2 16.4,-22.4 16.4,-37.2 0,-27.8 -22.5,-50.3 -50.3,-50.3 -27.8,0 -50.3,22.5 -50.3,50.3 0,14.7 6.3,28 16.4,37.2 18.4,18.1 31,55.1 31,97.8 0,54.8 -20.7,100.2 -47.8,108.3 -77.400005,22 -134.0000049,93.2 -134.0000049,177.6 0,102 82.6999999,184.6 184.7000049,184.6 102,0 184.7,-82.7 184.7,-184.7 -0.1,-84.3 -56.7,-155.5 -134,-177.5 z"

     /&gt;  


</path>

    <animateTransform attributeName="transform" type="rotate" begin="svg1.click" dur="5s" values="0 190 593;90 190 593;90 190 593;0 190 593;0 190 593" repeatCount="indefinite" fill="freeze"/> 
</g>
</svg>
</div>

Answer 2

Проблема в том, что положение "большего" круга фигур должно оставаться неизменным. Вместо этого, оно "скачет" и сама фигура выходит за пределы svg в процессе анимации. Предположу, что это происходит из-за разного "размера" конечных состояний

Вы абсолютно правы, посмотрите на скрин из векторного редактора:

Фигура изначально выходит за границы холста SVG. А при повороте, тем более выйдет за границы.
Я проанализировал вашу программу и сделал вывод, что выход за границы в первом вертикальном положении дизайнер пытался скрыть наложением второго маленького круга, а при повороте отодвигает всю фигуру, поэтому она "скачет"

Решение

1. Опустить изначально всю фигуру вниз

2. Немного расширить границу вправо для этого изменяю ширину viewBox="0 0 525 788" было 485px

3. Достаточно использовать один path, который будет анимированно изменяться ко второой форме, как на рисунке в вопросе. Это делается с помощью техники, которая подробно описана здесь

4. Одновременно с анимацией морфинга контура будет происходить вращение на 90 градусов.

<animateTransform attributeName="transform" type="rotate"
   begin="0s" dur="2s" values="0 190 593;90 190 593" fill="freeze"/>

Анимация начнется после клика

<style>
 .container {
 width:25vw;
 height:25vh;
 }
</style>
<div class="container">
<svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 525 788" xml:space="preserve" <style>.st0{fill:#000}</style>
<g>
<path class="st0" d="m 240.12204,416.30598 c -27.1,-8.1 -47.8,-53.5 -47.8,-108.3 0,-42.7 12.6,-79.7 31,-97.8 10.1,-9.2 16.4,-22.4 16.4,-37.2 0,-27.8 -22.5,-50.3 -50.3,-50.3 -27.8,0 -50.3,22.5 -50.3,50.3 0,14.7 6.3,28 16.4,37.2 18.4,18.1 31,55.1 31,97.8 0,54.8 -20.7,100.2 -47.8,108.3 -77.400005,22 -134.0000049,93.2 -134.0000049,177.6 0,102 82.6999999,184.6 184.7000049,184.6 102,0 184.7,-82.7 184.7,-184.7 -0.1,-84.3 -56.7,-155.5 -134,-177.5 z" >   
        <!-- Анимация изменения контуров фигуры -->
 <animate
         attributeName="d"
         begin="svg1.click"
         dur="2s"
         fill="freeze"
         repeatCount="1"
         values="
           m 240.12204,416.30598 c -27.1,-8.1 -47.8,-53.5 -47.8,-108.3 0,-42.7 12.6,-79.7 31,-97.8 10.1,-9.2 16.4,-22.4 16.4,-37.2 0,-27.8 -22.5,-50.3 -50.3,-50.3 -27.8,0 -50.3,22.5 -50.3,50.3 0,14.7 6.3,28 16.4,37.2 18.4,18.1 31,55.1 31,97.8 0,54.8 -20.7,100.2 -47.8,108.3 -77.400005,22 -134.0000049,93.2 -134.0000049,177.6 0,102 82.6999999,184.6 184.7000049,184.6 102,0 184.7,-82.7 184.7,-184.7 -0.1,-84.3 -56.7,-155.5 -134,-177.5 z;
       m 240.12204,416.30598 c -27.1,-10.46102 -43.91523,-2.47822 -43.8,-11.25127 0.34539,-26.29667 6.93051,-2.31441 28.66949,-28.34449 10.1,-9.2 14.73051,-24.90424 14.73051,-39.70424 0,-27.8 -22.5,-50.3 -50.3,-50.3 -27.8,0 -50.3,22.5 -50.3,50.3 0,14.7 5.46525,30.08686 15.56525,39.28686 25.49534,27.2822 26.40809,2.64711 27.83475,28.17161 0.55574,9.94276 -16.7,-0.39025 -43.8,11.84153 -77.400005,22 -134.0000049,93.2 -134.0000049,177.6 0,102 82.6999999,184.6 184.7000049,184.6 102,0 184.7,-82.7 184.7,-184.7 -0.1,-84.3 -56.7,-155.5 -134,-177.5 z" 
     /&gt;  


</path>

       <!-- Анимация вращения всей фигуры на 90 градусов  -->
   <animateTransform
     attributeName="transform"
     type="rotate"
     begin="svg1.click"
     dur="2s"
     values="0 190 593;90 190 593"
     fill="freeze"/>
</g>
</svg>
</div>