4

Как можно произвести анимацию формы одного объекта в другую форму.

Имеется обычный круг, который оконтурил в объект path. И есть shape, который имеет многие кривые и совсем другую структуру. Интересует вопрос, как можно анимировать переход из одного объекта в другой.

#shape {
  fill: gray;
}

#circle {
  fill: red;
}

#circle-path {
  fill: yellow;
}
<svg xmlns="http://www.w3.org/2000/svg" width="146.46799mm" height="138.86078mm" viewBox="0 0 146.46799 138.86078" version="1.1">
    <path id="shape" d="m 57.994787,35.937017 c -3.565275,22.228189 85.795973,-13.105122 84.666663,-11.339285 -19.96273,35.147623 1.3138,49.902207 26.45833,62.744045 0.99272,0.389339 -25.82829,18.898863 -44.60119,24.190473 -4.04384,1.38725 -41.098315,2.80074 -28.726185,-34.017851 0.136954,-0.718762 -53.549741,5.805982 -53.672618,3.023809 0,0 1.700693,-26.444115 -9.827381,-40.065476 -6.889193,-8.358279 -2.234786,-15.57944 12.095239,-19.654762 10.612461,-2.556252 15.089861,2.556323 13.607142,15.119047 z"/>
    <circle id="circle" cx="35.340775" cy="146.37648" r="12.662203"/>
    <path id="circle-path" d="M 74.650297,107.63393 A 12.662203,12.662203 0 0 1 61.988094,120.29613 12.662203,12.662203 0 0 1 49.325891,107.63393 12.662203,12.662203 0 0 1 61.988094,94.971724 12.662203,12.662203 0 0 1 74.650297,107.63393 Z"/>
	<animate xlink:href="#shape" repeatcount="indefinite" attributeName="d" dur="3s" values="M 74.650297,107.63393 A 12.662203,12.662203 0 0 1 61.988094,120.29613 12.662203,12.662203 0 0 1 49.325891,107.63393 12.662203,12.662203 0 0 1 61.988094,94.971724 12.662203,12.662203 0 0 1 74.650297,107.63393 Z; m 57.994787,35.937017 c -3.565275,22.228189 85.795973,-13.105122 84.666663,-11.339285 -19.96273,35.147623 1.3138,49.902207 26.45833,62.744045 0.99272,0.389339 -25.82829,18.898863 -44.60119,24.190473 -4.04384,1.38725 -41.098315,2.80074 -28.726185,-34.017851 0.136954,-0.718762 -53.549741,5.805982 -53.672618,3.023809 0,0 1.700693,-26.444115 -9.827381,-40.065476 -6.889193,-8.358279 -2.234786,-15.57944 12.095239,-19.654762 10.612461,-2.556252 15.089861,2.556323 13.607142,15.119047 z"/>
</svg>

Собственно мне понятна причина почему такое происходит, и решением данной проблемы пока-что мне кажется является ручной подгон из одного состояния в другой. Для меня не проблематично подогнать shape под круг, но если мой shape имеет свыше 100 точек и кривых, то конечно будет не комильфо каждую из них хотя-бы примерно подгонять под круг. Поэтому и спрашиваю, может есть что-то такое, что может решить данную проблему?

Из одного path в другой path, которые между собой не связаны совсем.

4
  • 1
    как то писал тут об этом ru.stackoverflow.com/a/940478/188366 30 ноя 2019 в 19:24
  • @StrangerintheQ не помог ваш ответ с Flubber. Переход не удается и CodePen падает. codepen.io/molof/pen/ExaYpNb
    – MoloF
    30 ноя 2019 в 23:10
  • Не проходите мимо начинающие и начавшие осваивать SVG. Можно почитать и освоить переспективную технику морфинга для оформления своих или чужих сайтов. Уверен, если внимательно прочтёте, то сами научитесь делать это. Подтверждение этому сделал автор этого вопроса @MoloF. Смотрите его ответ. 2 дек 2019 в 13:42

4 ответа 4

6

TL;DR

Многа букоф Если нет времени прочитать или неохота, покажу сразу результат, как можно сделать самому анимацию морфинга фигур:

Все примеры анимации адаптивны, работают во всех современных браузерах кроме IE,Edge

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100vw" height="100vh" viewBox="0 0 146.46799 138.86078" version="1.1" style="border:1px solid gray;">
     <path fill="skyblue" stroke="none" id="circle-path" d="m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z">
	   <animate
	     attributeName="d"
		 begin="svg1.click"
		 dur="10s"
		 fill="freeze"
		 repeatCount="indefinite"
		 values="
		 m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z;
		
		m 70.593743,107.73794 c -0.243194,6.07069 15.611869,7.88354 12.606619,13.16377 -3.555095,6.24632 -13.817261,-4.82 -21.00424,-4.87016 -7.416407,-0.0518 -18.25488,11.26785 -21.742792,4.7226 -2.968802,-5.57111 13.722801,-6.80779 13.657214,-13.12022 C 54.011819,98.132075 7.1879775,88.120019 33.146958,88.315985 51.480072,88.454382 62.075479,12.021276 63.028236,24.346082 64.200843,39.514843 75.538052,88.246354 92.463605,88.286539 113.6676,88.336883 70.984266,97.98958 70.593743,107.73794 Z;

		 m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z" />
	</path>	 
</svg>

Процитирую свой комментарий на топик по ссылке:

хороший плагин, впрочем их много в сети. Но у всех есть свой изъян - если у двух путей не будут совпадать количество узлов в двух путях, либо команды С, Q T кривых Безье не будут одинаковыми в одинаковых по счёту узлах, либо пути будут иметь разрывы, либо контуры будут не одинарными Эти библиотеки работать не будут.

Поэтому необходимо выполнить все эти условия при создания двух path И только после этого можно использовать JS для анимации. Не ищите волшебную палочку, она в ваших руках.

Правда есть ещё один скрипт KUTE.js, который позволяет делать анимацию, если path не совсем отвечают вышеперечисленным условиям, в частности допустима не целостность пути. Впрочем он кажется был платным.

Техника создания path для морфинга фигур

Если будете внимательно следовать данной инструкции, то у вас получится любая анимация со сложными морфингами.

Трудно будет сделать это без ошибок в первый раз, необходимы минимальные навыки работы с векторными редакторами, но когда вы пройдёте этот путь, то любая сложная анимация будет готова за 10-15 минут.

Лучше идти от простой фигуры, в этом случае окружности, к получению сложной формы.

Морфинг без добавления дополнительных узлов

Рисуем окружность в векторном редакторе.

  1. Выделяем узлы инструментом "Редактировать узлы контура" F2 ( При выделении нужно удерживать shift ) Выделенные узлы окрасятся в жёлтый цвет
  2. Нажать - "Сделать выделенные узлы автоматически сглаженными"

введите сюда описание изображения

Сохранить файл SVG и скопировать формулу path в отдельный файл, который будет реализовывать анимацию.

  1. Переместить узловую точку вверх, при необходимости откорректировать форму кривых рычагами узловых точек. На рис. это (4).

введите сюда описание изображения

Сохраняем и копируем снова path

Далее пишем формулу анимации

<animate attributeName="d" values="path_начальный";path_конечный" dur="4s" fill="freeze" />   

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="146.46799mm" height="138.86078mm" viewBox="0 0 146.46799 138.86078" version="1.1" style="border:1px solid grey;">
     <path fill="gold" stroke="black" id="circle-path" d="m 74.650297,107.63393 c -10e-7,5.96902 -4.044665,12.98667 -12.662203,12.6622 -9.200154,-0.3464 -12.662202,-6.69318 -12.662203,-12.6622 -10e-7,-5.96902 4.781232,-12.755533 12.662203,-12.662206 8.91085,0.105522 12.662204,6.693186 12.662203,12.662206 z">
	   <animate
	     attributeName="d"
		 begin="svg1.click"
		 dur="1s"
		 fill="freeze"
		 values="
		 m 74.650297,107.63393 c -10e-7,5.96902 -4.044665,12.98667 -12.662203,12.6622 -9.200154,-0.3464 -12.662202,-6.69318 -12.662203,-12.6622 -10e-7,-5.96902 4.781232,-12.755533 12.662203,-12.662206 8.91085,0.105522 12.662204,6.693186 12.662203,12.662206 z;
		 m 74.650297,107.63393 c -1.015361,5.88203 -4.044665,12.98667 -12.662203,12.6622 -9.200154,-0.3464 -11.673533,-6.77563 -12.662203,-12.6622 -1.617223,-9.629 4.92833,-26.435674 12.809301,-26.342347 8.91085,0.105522 14.168762,16.762647 12.515105,26.342347 z" />
	</path>	 
</svg>  

Морфинг с добавлением узлов

введите сюда описание изображения

Добавляем дополнительные узлы

Чтобы вставить дополнительный узел между двумя существующими необходимо:

  1. Выделить эти два узла инструментом "Редактировать узлы контура" F2 При выделении нужно удерживать shift Выделенные узлы окрасятся в жёлтый цвет

  2. Нажать на верхней панели Inscape - "Вставить новые узлы в выделенные сегменты"

Должен появиться дополнительный узел, ровно по середине между двумя старыми узлами.

  1. Выделить все узлы и нажать - "Сделать выделенные узлы автоматически сглаженными"

  2. Сохранить файл и скопировать полученный path

введите сюда описание изображения

Одна из возможных мин :)
От лишнего щелчка под существующим узлом может добавиться дополнительный узел.

Note При неравенстве количества узловых точек анимация будет работать рывками.

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

Просто удалите лишний узел.

После проверок скопируйте финальный патч.

Если сделали всё аккуратно, то будет работать плавная анимация после клика на круге:

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100vw" height="100vh" viewBox="0 0 146.46799 138.86078" version="1.1" style="border:1px solid gray;">
     <path fill="gold" stroke="black" id="circle-path" d="m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z">
	   <animate
	     attributeName="d"
		 begin="svg1.click"
		 dur="2s"
		 fill="freeze"
		 values="
		 m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z;
		 m 70.593743,107.73794 c -0.243194,6.07069 15.611869,7.88354 12.606619,13.16377 -3.555095,6.24632 -13.817261,-4.82 -21.00424,-4.87016 -7.416407,-0.0518 -18.25488,11.26785 -21.742792,4.7226 -2.968802,-5.57111 13.722801,-6.80779 13.657214,-13.12022 C 54.011819,98.132075 7.1879775,88.120019 33.146958,88.315985 51.480072,88.454382 62.075479,12.021276 63.028236,24.346082 64.200843,39.514843 75.538052,88.246354 92.463605,88.286539 113.6676,88.336883 70.984266,97.98958 70.593743,107.73794 Z" />
	</path>	 
</svg>

Анимация туда-обратно

<animate attributeName="d" values="
path_начальный;
path_конечный;
path_начальный"
dur="4s"
fill="freeze" /> 

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100vw" height="100vh" viewBox="0 0 146.46799 138.86078" version="1.1" style="border:1px solid gray;">
     <path fill="gold" stroke="black" id="circle-path" d="m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z">
	   <animate
	     attributeName="d"
		 begin="svg1.click"
		 dur="10s"
		 fill="freeze"
		 repeatCount="indefinite"
		 values="
		 m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z;
		
		m 70.593743,107.73794 c -0.243194,6.07069 15.611869,7.88354 12.606619,13.16377 -3.555095,6.24632 -13.817261,-4.82 -21.00424,-4.87016 -7.416407,-0.0518 -18.25488,11.26785 -21.742792,4.7226 -2.968802,-5.57111 13.722801,-6.80779 13.657214,-13.12022 C 54.011819,98.132075 7.1879775,88.120019 33.146958,88.315985 51.480072,88.454382 62.075479,12.021276 63.028236,24.346082 64.200843,39.514843 75.538052,88.246354 92.463605,88.286539 113.6676,88.336883 70.984266,97.98958 70.593743,107.73794 Z;

		 m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z" />
	</path>	 
</svg>

Анимация от сложной фигуры к простой (окружности)

У нас есть path начального и финального положения трансформации. Поэтому, чтобы сделать анимацию от сложной фигуры к кругу, достаточно поменять path местами:

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100vw" height="100vh" viewBox="0 0 146.46799 138.86078" version="1.1" style="border:1px solid gray;">
     <path fill="gold" stroke="black" id="circle-path" d="m 70.593743,107.73794 c -0.243194,6.07069 15.611869,7.88354 12.606619,13.16377 -3.555095,6.24632 -13.817261,-4.82 -21.00424,-4.87016 -7.416407,-0.0518 -18.25488,11.26785 -21.742792,4.7226 -2.968802,-5.57111 13.722801,-6.80779 13.657214,-13.12022 C 54.011819,98.132075 7.1879775,88.120019 33.146958,88.315985 51.480072,88.454382 62.075479,12.021276 63.028236,24.346082 64.200843,39.514843 75.538052,88.246354 92.463605,88.286539 113.6676,88.336883 70.984266,97.98958 70.593743,107.73794 Z">
	   <animate
	     attributeName="d"
		 begin="svg1.click"
		 dur="4s"
		 fill="freeze"
		 repeatCount="1"
		 values="
				
		m 70.593743,107.73794 c -0.243194,6.07069 15.611869,7.88354 12.606619,13.16377 -3.555095,6.24632 -13.817261,-4.82 -21.00424,-4.87016 -7.416407,-0.0518 -18.25488,11.26785 -21.742792,4.7226 -2.968802,-5.57111 13.722801,-6.80779 13.657214,-13.12022 C 54.011819,98.132075 7.1879775,88.120019 33.146958,88.315985 51.480072,88.454382 62.075479,12.021276 63.028236,24.346082 64.200843,39.514843 75.538052,88.246354 92.463605,88.286539 113.6676,88.336883 70.984266,97.98958 70.593743,107.73794 Z;

		 m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z" />
	</path>	 
</svg>

9
  • Выделил ваш, ответ как верный. Можете подметить, можно ли из шейпа в данном CodePen codepen.io/molof/pen/ExaYpNb перейти в круг и обратно?
    – MoloF
    1 дек 2019 в 15:06
  • @MoloF скорее всего нет. Ошибки в path - Codepen пдвисает на вашем приложении, а затем вываливает сложную фигуру. Такой скачок в анимации - верный признак ошибок в патче. Вы ведь сможете по моей статье снова нарисовать патч без ошибок? Или много букаф не охота читать? :-) 1 дек 2019 в 15:30
  • Ваши ответы никогда не было лень читать. Всего-лишь хотел удостовериться в своей криворукости. Я взял перо кривой и создавал path , теперь попробую создать фигуру по вашему ответу. Спасибо большое
    – MoloF
    1 дек 2019 в 15:54
  • @MoloF для анимации никогда не рисуйте в векторных редакторах пером или карандашом, потому-что получаются двойные контуры, с которыми будут очень большие проблемы. Рисовать для анимации нужно только инструментом - Рисовать кривые Безье и прямые линии после него получится одиночный контур А пример ниже смотрели? 1 дек 2019 в 16:06
  • Да, я рисую только этим инструментом что вы указали, просто не явно выразился. Пример ниже смотрел, но только с телефона, до пк не добрался :^
    – MoloF
    1 дек 2019 в 16:14
3

Морфинг из сложной формы в окружность и обратно к сложной форме

Добавлены радиальные градиенты. При необходимости можно выбрать другие цвета или за ненадобность удалить.

красно-чёрный градиент

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="146.46799mm" height="138.86078mm" viewBox="0 0 146.46799 138.86078" version="1.1" style="border:1px solid gray;">
 <defs>
      <radialGradient id="rg" r=".9">
              <stop offset="0%" stop-color="red"></stop>
              <stop offset="10%" stop-color="#000"></stop>
              <stop offset="20%" stop-color="red"></stop>
              <stop offset="30%" stop-color="#000"></stop>
              <stop offset="40%" stop-color="red"></stop>
              <stop offset="50%" stop-color="#000"></stop>
              <stop offset="60%" stop-color="red"></stop>
              <stop offset="70%" stop-color="#000"></stop>
              <stop offset="80%" stop-color="red"></stop>
              <stop offset="90%" stop-color="#000"></stop>
              <stop offset="100%" stop-color="red"></stop>
            </radialGradient>
    </defs>
     <path fill="url(#rg)" stroke="none" id="circle-path" d="m 70.593743,107.73794 c -0.243194,6.07069 15.611869,7.88354 12.606619,13.16377 -3.555095,6.24632 -13.817261,-4.82 -21.00424,-4.87016 -7.416407,-0.0518 -18.25488,11.26785 -21.742792,4.7226 -2.968802,-5.57111 13.722801,-6.80779 13.657214,-13.12022 C 54.011819,98.132075 7.1879775,88.120019 33.146958,88.315985 51.480072,88.454382 62.075479,12.021276 63.028236,24.346082 64.200843,39.514843 75.538052,88.246354 92.463605,88.286539 113.6676,88.336883 70.984266,97.98958 70.593743,107.73794 Z">
	   <animate
	     attributeName="d"
		 begin="svg1.click"
		 dur="12s"
		 fill="freeze"
		 repeatCount="1"
		 values="
				
		m 70.593743,107.73794 c -0.243194,6.07069 15.611869,7.88354 12.606619,13.16377 -3.555095,6.24632 -13.817261,-4.82 -21.00424,-4.87016 -7.416407,-0.0518 -18.25488,11.26785 -21.742792,4.7226 -2.968802,-5.57111 13.722801,-6.80779 13.657214,-13.12022 C 54.011819,98.132075 7.1879775,88.120019 33.146958,88.315985 51.480072,88.454382 62.075479,12.021276 63.028236,24.346082 64.200843,39.514843 75.538052,88.246354 92.463605,88.286539 113.6676,88.336883 70.984266,97.98958 70.593743,107.73794 Z;

		 m 74.650297,107.63393 c -0.0084,3.07576 -0.980818,6.46148 -3.099525,8.69116 -2.377505,2.50202 -6.111289,3.9951 -9.562678,3.97104 -3.551151,-0.0248 -7.370617,-1.61483 -9.781159,-4.22262 -2.017766,-2.18287 -2.947777,-5.46773 -2.881044,-8.43958 0.06917,-3.08022 1.239016,-6.38481 3.375737,-8.604483 2.342764,-2.433714 5.908402,-4.043864 9.286466,-4.057723 3.506098,-0.01438 7.277438,1.571863 9.672671,4.132292 2.058264,2.200214 2.997772,5.517054 2.989532,8.529914 z;
		 
		 m 70.593743,107.73794 c -0.243194,6.07069 15.611869,7.88354 12.606619,13.16377 -3.555095,6.24632 -13.817261,-4.82 -21.00424,-4.87016 -7.416407,-0.0518 -18.25488,11.26785 -21.742792,4.7226 -2.968802,-5.57111 13.722801,-6.80779 13.657214,-13.12022 C 54.011819,98.132075 7.1879775,88.120019 33.146958,88.315985 51.480072,88.454382 62.075479,12.021276 63.028236,24.346082 64.200843,39.514843 75.538052,88.246354 92.463605,88.286539 113.6676,88.336883 70.984266,97.98958 70.593743,107.73794 Z" />
	</path>	 
</svg>  

сине-чёрный градиент

Анимация ускорена и зациклена

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	width="1400" height="1050" viewBox="0 100 1400 1050" preserveAspectRatio="xMinYMin meet" > 
	
	<defs>
      <radialGradient id="rg" r=".9">
              <stop offset="0%" stop-color="dodgerblue"></stop>
              <stop offset="10%" stop-color="#000"></stop>
              <stop offset="20%" stop-color="dodgerblue"></stop>
              <stop offset="30%" stop-color="#000"></stop>
              <stop offset="40%" stop-color="dodgerblue"></stop>
              <stop offset="50%" stop-color="#000"></stop>
              <stop offset="60%" stop-color="dodgerblue"></stop>
              <stop offset="70%" stop-color="#000"></stop>
              <stop offset="80%" stop-color="dodgerblue"></stop>
              <stop offset="90%" stop-color="#000"></stop>
              <stop offset="100%" stop-color="dodgerblue"></stop>
            </radialGradient>
    </defs>
  <text x="180" y="180" font-size="24px" fill="dodgerblue">Окройте на весь экран и мышкой бац! </text>
<path  fill="url(#rg)"
   d="m750 525c0 13.8-5.6 26.3-14.6 35.4C726.3 569.4 713.8 575 700 575 686.2 575 673.7 569.4 664.6 560.4 655.6 551.3 650 538.8 650 525c0-13.8 5.6-26.3 14.6-35.4C673.7 480.6 686.2 475 700 475c13.8 0 26.3 5.6 35.4 14.6C744.4 498.7 750 511.2 750 525Z" >
  <animate
    attributeName="d"
	dur="10s"
	begin="svg1.click"
	repeatCount="1"
	values="
	m750 525c0 13.8-5.6 26.3-14.6 35.4C726.3 569.4 713.8 575 700 575 686.2 575 673.7 569.4 664.6 560.4 655.6 551.3 650 538.8 650 525c0-13.8 5.6-26.3 14.6-35.4C673.7 480.6 686.2 475 700 475c13.8 0 26.3 5.6 35.4 14.6C744.4 498.7 750 511.2 750 525Z;
	
	m1275 527.2c-0.7 180.2-409.8-91.8-539.6 33.1-79.8 76.8 77.6 329.8-33.1 330.5C591.3 891.6 745 636.8 664.6 560.4 539.2 441 146.9 700.4 146.1 527.2 145.4 353.9 539.7 609.7 664.6 489.6 742.7 414.6 592.8 166.5 701.1 166.9 809.3 167.3 657.5 414.5 735.4 489.6 865.1 614.8 1275.7 346.9 1275 527.2Z;
	
	m1275 527.2c2.2 179.9-469.8 50.2-537.4 50.9-35.7 0.4 79.8 312.5-35.4 312.7C578 891.1 695.2 580.1 660.2 579.3 487.1 575.2 22.3 704.8 24.9 531.7 28.2 310.6 661.3 525.6 664.6 489.6c8.7-92.4-71.8-323.1 36.5-322.7 108.2 0.4 11.1 321.8 34.2 322.7C835.6 493.7 1272.8 346.9 1275 527.2Z;
	
	m1275 527.2c-0.2 121.5 80.9 279.4-5.7 364.6-134.8 132.5-378-0.2-567-0.9-183.8-0.7-421.1 126-551.5-3.5-85.2-84.6-5.4-240.1-4.6-360.1 0.8-117.1-74.1-268.8 9.1-351.2 129.3-128.1 363.9-7.2 545.9-9.1 189.7-1.9 434-135.1 569.3-2 86.1 84.7 4.8 241.6 4.6 362.4z"
	fill="freeze" /> 
</path>  


</svg>

Морфинг по картинам Pablo Picasso

Пример не мой, когда то давно скачал и сейчас не могу найти ссылку. Буду благодарен, за ссылку на источник.

let drawings = [
  "flamingo_pinguin",
  "pinguin_lady",
  "lady_dog",
  "dog_cammel",
  "camel_flamingo"
];

for (let i = 0; i < drawings.length; i++) {
  let drawing = document.querySelector(`#${drawings[i]}`);
  let n = i + 1 < drawings.length ? i + 1 : 0;
  let next = document.querySelector(`#${drawings[n]}`);

  drawing.addEventListener(
    "webkitAnimationEnd",
    () => {
      drawing.classList.remove("animated");
      next.classList.add("animated");
    },
    false
  );

  drawing.addEventListener(
    "animationend ",
    () => {
      drawing.classList.remove("animated");
      next.classList.add("animated");
    },
    false
  );
}
body{background:Snow}

svg {
  background:white;
  display: block;
  width: 60vh;
  box-shadow: 0px 5px 10px #888;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
path {
  fill: none;
  stroke: black;
}

/******************************/
#flamingo_pinguin {
  display: none;
  stroke-dasharray: 1531px; /* length */
  stroke-dashoffset: 2246px; /* length + C */
}
#flamingo_pinguin.animated {
  display: block;
  animation: flamingoPinguin 2s linear forwards;
  animation-delay: 2s;
}

@keyframes flamingoPinguin {
  100% {
    stroke-dashoffset: 3869px; /* 2*length + B + C */
  }
}

/******************************/
#pinguin_lady {
  display: none;
  stroke-dasharray: 2130px; /* length */
  stroke-dashoffset: 2853px; /* length + C */
}
#pinguin_lady.animated {
  display: block;
  animation: pinguinLady 2s linear forwards;
  animation-delay: 2s;
}

@keyframes pinguinLady {
  100% {
    stroke-dashoffset: 5162px; /* 2*length + B + C */
  }
}

/******************************/

#lady_dog {
  display: none;
  stroke-dasharray: 1812px; /* length */
  stroke-dashoffset: 3040px; /* length + C */
}
#lady_dog.animated {
  display: block;
  animation: ladyDog 2s linear forwards;
  animation-delay: 2s;
}

@keyframes ladyDog {
  100% {
    stroke-dashoffset: 4920px; /* 2*length + B + C */
  }
}

/******************************/
#dog_cammel {
  display: none;
  stroke-dasharray: 1467px; /* length */
  stroke-dashoffset: 1984px; /* length + C */
}
#dog_cammel.animated {
  display: block;
  animation: dogCammel 2s linear forwards;
  animation-delay: 2s;
}

@keyframes dogCammel {
  100% {
    stroke-dashoffset: 3599px; /* 2*length + B + C */
  }
}

/******************************/

#camel_flamingo {
  display: none;
  stroke-dasharray: 1540px; /* length */
  stroke-dashoffset: 2343px; /* length + C */
}
#camel_flamingo.animated {
  display: block;
  animation: camelFlamingo 2s linear forwards;
  animation-delay: 2s;
}

@keyframes camelFlamingo {
  100% {
    stroke-dashoffset: 3905px; /* 2*length + B + C */
  }
}
<svg viewBox="0 0 225 280" >

<!-- pinguin connnexion flamingo -->
<path id="flamingo_pinguin"  
      d="M87.953, 226.174C87.953, 226.174 89.174, 221.233 90.887, 221.660 C92.600, 222.087 98.043, 229.498 99.119, 227.644 C102.398, 221.998 94.407, 195.945 93.121, 188.663 C91.835, 181.381 88.274, 149.209 87.124, 136.401 C85.244, 115.469 99.294, 83.323 98.561, 76.422 C97.574, 67.131 69.561, 59.721 69.561, 59.721 C74.563, 60.022 79.565, 60.322 84.567, 60.623 C84.567, 60.623 91.225, 60.510 99.412, 59.721 C104.311, 59.248 109.135, 61.534 108.830, 64.121 C108.258, 68.977 86.696, 64.511 86.696, 59.546 C86.696, 54.581 92.772, 48.835 107.294, 49.440 C128.285, 50.315 141.570, 63.192 149.238, 128.690 C159.092, 212.878 147.095, 234.499 144.097, 234.499 C141.099, 234.499 122.679, 177.525 118.824, 153.536 C114.969, 129.547 115.595, 107.437 121.394, 102.559 C122.146, 101.927 121.747, 95.259 119.840, 94.161 C118.679, 93.492 109.247, 111.865 107.256, 110.698 C103.072, 108.246 109.358, 85.535 119.210, 80.823 C129.062, 76.111 130.388, 91.421 130.388, 91.421
                                
               C130.389, 91.421 133.862, 99.702 135.415, 109.129 C137.234, 120.171 137.149, 132.808 136.714, 135.892 C130.364, 180.838 111.239, 148.289 111.239, 148.289
   
C111.239, 148.289 112.176, 142.798 113.720, 141.789 C118.007, 138.991 117.062, 137.042 142.367, 149.287 C167.672, 161.532 166.856, 188.471 168.897, 172.960 C170.938, 157.449 170.938, 97.858 135.835, 85.613 C100.733, 73.368 76.243, 109.286 76.243, 109.286 C76.243, 109.286 75.019, 101.939 81.549, 90.102 C88.079, 78.265 90.937, 53.367 90.937, 45.204 C90.937, 37.041 86.448, 31.326 83.583, 30.918 C80.718, 30.510 77.875, 38.265 77.875, 38.265 C77.875, 38.265 70.025, 27.779 56.928, 40.876 C46.094, 51.709 57.981, 75.642 55.532, 65.030 C53.083, 54.418 57.572, 41.842 68.487, 45.204 C76.753, 47.750 79.686, 56.335 78.691, 66.429 C78.282, 70.571 75.425, 72.551 74.609, 76.225 C73.793, 79.899 75.834, 83.164 74.201, 86.429 C72.568, 89.694 62.316, 111.293 62.724, 121.497 C63.132, 131.701 74.200, 141.939 77.874, 141.939 C81.548, 141.939 92.160, 128.468 94.201, 128.061 C96.242, 127.653 101.548, 131.735 106.446, 140.000 C111.345, 148.266 114.201, 152.550 115.788, 161.938 C117.375, 171.327 114.609, 191.735 115.426, 211.327 C116.243, 230.919 115.426, 255.409 115.426, 255.409 C115.426, 255.409 109.712, 250.919 106.447, 248.878 C103.182, 246.837 102.926, 247.083 102.425, 247.733 C101.924, 248.384 101.957, 248.878 101.957, 248.878 C101.957, 249.694 101.957, 250.511 101.957, 251.327" /> 
  
<path id="pinguin_lady"  class="animated"
      d="M85.469, 82.755 C85.469, 82.755 96.081, 76.633 97.306, 73.367 C98.531, 70.101 94.857, 64.388 95.673, 63.163 C96.489, 61.938 99.755, 63.163 99.755, 63.163 C99.755, 63.163 99.427, 60.181 100.859, 60.521 C102.581, 60.931 100.295, 56.588 102.744, 56.996 C105.193, 57.404 100.353, 52.976 103.892, 52.160 C107.431, 51.344 118.576, 53.075 121.025, 56.341 C123.474, 59.607 124.654, 63.392 121.388, 66.747 C118.121, 70.102 107.752, 76.960 109.550, 82.755 C110.613, 86.181 127.101, 76.225 138.121, 73.776 C149.142, 71.327 156.489, 67.245 166.285, 62.755 C176.081, 58.265 178.752, 54.753 181.201, 51.668 C183.649, 48.583 186.692, 37.449 187.917, 37.857 C189.142, 38.265 187.509, 43.571 187.917, 45.612 C188.325, 47.653 190.774, 46.428 190.774, 46.428 C190.774, 46.428 188.326, 50.102 186.692, 53.775 C185.059, 57.448 183.835, 62.346 177.713, 67.244 C171.591, 72.142 168.325, 72.958 161.795, 75.815 C155.265, 78.672 151.562, 82.262 141.765, 85.528 C131.970, 88.794 119.081, 89.285 113.499, 93.775 C107.917, 98.265 105.061, 110.102 99.346, 109.693 C93.632, 109.284 96.898, 96.633 92.000, 95.000 C87.102, 93.367 83.429, 101.939 78.531, 99.898 C73.633, 97.857 73.633, 92.551 76.898, 86.428 C80.163, 80.305 79.439, 78.195 76.082, 73.774 C70.691, 66.675 53.225, 76.224 47.511, 75.816 C41.797, 75.408 36.490, 65.204 33.225, 57.449 C29.960, 49.694 23.837, 41.939 23.837, 41.939 C23.837, 41.939 22.613, 46.837 23.837, 48.878 C25.061, 50.919 22.204, 48.878 20.980, 48.878 C19.756, 48.878 24.654, 52.143 27.511, 57.449 C30.368, 62.755 31.802, 74.963 36.915, 81.595 C45.372, 92.565 60.164, 86.836 65.878, 91.326 C71.592, 95.816 77.415, 133.568 93.633, 134.592 C100.038, 134.996 95.468, 124.133 99.958, 122.092 C104.448, 120.051 110.368, 128.469 116.490, 132.551 C122.611, 136.633 133.320, 128.489 143.019, 138.265 C150.745, 146.051 148.326, 153.367 148.326, 155.000 C148.326, 156.633 150.402, 157.107 151.183, 160.307 C153.242, 168.739 151.590, 179.491 152.816, 182.755 C154.041, 186.020 165.222, 191.785 169.142, 193.776 C175.372, 196.940 178.529, 195.001 182.611, 197.858 C186.693, 200.714 185.877, 206.428 187.918, 208.879 C189.959, 211.330 197.509, 218.013 203.837, 218.267 C207.100, 218.398 203.837, 222.349 203.837, 222.349 C202.885, 222.349 201.932, 222.349 200.981, 222.349 C201.252, 223.301 201.524, 224.254 201.796, 225.206 C201.796, 225.206 200.162, 226.022 198.529, 225.206 C196.898, 224.390 198.631, 219.817 168.734, 206.839 C128.564, 189.400 132.990, 160.455 113.500, 152.961 C99.107, 147.427 98.938, 154.187 90.367, 155.817 C81.796, 157.450 54.040, 156.651 45.877, 165.614 C41.093, 170.866 43.836, 175.817 42.612, 179.083 C41.388, 182.349 40.163, 183.166 39.347, 186.839 C38.531, 190.513 41.388, 202.756 40.979, 209.287 C40.570, 215.817 37.714, 226.020 37.306, 231.328 C36.898, 236.635 38.532, 241.793 36.081, 245.206 C30.354, 253.185 28.059, 251.298 24.652, 253.369 C22.908, 254.431 23.428, 257.043 26.693, 257.043 C29.958, 257.043 28.734, 253.776 34.856, 255.410 C40.978, 257.043 36.897, 260.307 40.162, 260.307 C43.427, 260.307 41.260, 255.784 42.076, 250.069 C42.892, 244.356 49.958, 236.225 53.632, 215.817 C57.306, 195.410 51.999, 188.469 56.897, 182.348 C61.795, 176.225 59.754, 182.348 81.387, 177.451 C103.020, 172.553 118.529, 165.206 118.529, 165.206
         
         C118.529, 165.205 198.122, 132.459 140.979, 219.806 C103.052, 277.780 87.953, 226.174 87.953, 226.174 
         
         C87.953, 226.174 89.174, 221.233 90.887, 221.660 C92.600, 222.087 98.043, 229.498 99.119, 227.644 C102.398, 221.998 94.407, 195.945 93.121, 188.663 C91.835, 181.381 88.274, 149.209 87.124, 136.401 C85.244, 115.469 99.294, 83.323 98.561, 76.422 C97.574, 67.131 69.561, 59.721 69.561, 59.721 C74.563, 60.022 79.565, 60.322 84.567, 60.623 C84.567, 60.623 91.225, 60.510 99.412, 59.721 C104.311, 59.248 109.135, 61.534 108.830, 64.121 C108.258, 68.977 86.696, 64.511 86.696, 59.546 C86.696, 54.581 92.772, 48.835 107.294, 49.440 C128.285, 50.315 141.570, 63.192 149.238, 128.690 C159.092, 212.878 147.095, 234.499 144.097, 234.499 C141.099, 234.499 122.679, 177.525 118.824, 153.536 C114.969, 129.547 115.595, 107.437 121.394, 102.559 C122.146, 101.927 121.747, 95.259 119.840, 94.161 C118.679, 93.492 109.247, 111.865 107.256, 110.698 C103.072, 108.246 109.358, 85.535 119.210, 80.823 C129.062, 76.111 130.388, 91.421 130.388, 91.421" />
  
<!-- dog connnexion pinguin -->
<path id="lady_dog"  
      d="M82.333, 160.684 C82.333, 160.684 84.217, 143.717 86.217, 141.385 C88.217, 139.052 110.985, 141.718 116.985, 141.385 C122.985, 141.052 135.565, 137.025 149.231, 137.192 C162.899, 137.359 174.334, 137.667 176.001, 140.000 C177.668, 142.333 175.668, 152.334 177.668, 155.334 C179.668, 158.334 180.002, 160.001 182.335, 159.334 C184.668, 158.667 183.158, 142.991 183.824, 137.991 C184.489, 132.991 187.002, 126.000 186.335, 122.000 C185.668, 118.000 184.000, 118.000 184.000, 118.000 C184.000, 118.000 199.001, 115.333 198.334, 108.333 C198.022, 105.061 191.076, 110.267 179.139, 115.114 C165.541, 120.636 145.703, 126.156 126.000, 126.333 C89.000, 126.666 74.667, 115.333 68.667, 116.666 C62.667, 117.999 59.334, 128.666 59.000, 135.499 C58.666, 142.332 62.333, 156.666 66.667, 157.666 C71.001, 158.666 73.001, 141.895 73.334, 133.281 C73.667, 124.667 73.409, 110.797 66.742, 109.380 C60.075, 107.963 55.809, 118.106 51.143, 121.773 C46.477, 125.440 25.000, 136.000 24.667, 138.000 C24.334, 140.000 26.695, 141.741 33.695, 141.074 C40.695, 140.407 42.121, 140.775 43.334, 140.000 C44.547, 139.225 46.929, 137.145 49.726, 137.560 C53.056, 138.054 58.173, 135.217 58.173, 135.217
         
       C58.173, 135.217 70.979, 132.054 71.821, 123.537 C72.360, 118.079 66.210, 111.530 69.754, 98.321 C72.541, 87.933 85.469, 82.755 85.469, 82.755
         
         
         C85.469, 82.755 96.081, 76.633 97.306, 73.367 C98.531, 70.101 94.857, 64.388 95.673, 63.163 C96.489, 61.938 99.755, 63.163 99.755, 63.163 C99.755, 63.163 99.427, 60.181 100.859, 60.521 C102.581, 60.931 100.295, 56.588 102.744, 56.996 C105.193, 57.404 100.353, 52.976 103.892, 52.160 C107.431, 51.344 118.576, 53.075 121.025, 56.341 C123.474, 59.607 124.654, 63.392 121.388, 66.747 C118.121, 70.102 107.752, 76.960 109.550, 82.755 C110.613, 86.181 127.101, 76.225 138.121, 73.776 C149.142, 71.327 156.489, 67.245 166.285, 62.755 C176.081, 58.265 178.752, 54.753 181.201, 51.668 C183.649, 48.583 186.692, 37.449 187.917, 37.857 C189.142, 38.265 187.509, 43.571 187.917, 45.612 C188.325, 47.653 190.774, 46.428 190.774, 46.428 C190.774, 46.428 188.326, 50.102 186.692, 53.775 C185.059, 57.448 183.835, 62.346 177.713, 67.244 C171.591, 72.142 168.325, 72.958 161.795, 75.815 C155.265, 78.672 151.562, 82.262 141.765, 85.528 C131.970, 88.794 119.081, 89.285 113.499, 93.775 C107.917, 98.265 105.061, 110.102 99.346, 109.693 C93.632, 109.284 96.898, 96.633 92.000, 95.000 C87.102, 93.367 83.429, 101.939 78.531, 99.898 C73.633, 97.857 73.633, 92.551 76.898, 86.428 C80.163, 80.305 79.439, 78.195 76.082, 73.774 C70.691, 66.675 53.225, 76.224 47.511, 75.816 C41.797, 75.408 36.490, 65.204 33.225, 57.449 C29.960, 49.694 23.837, 41.939 23.837, 41.939 C23.837, 41.939 22.613, 46.837 23.837, 48.878 C25.061, 50.919 22.204, 48.878 20.980, 48.878 C19.756, 48.878 24.654, 52.143 27.511, 57.449 C30.368, 62.755 31.802, 74.963 36.915, 81.595 C45.372, 92.565 60.164, 86.836 65.878, 91.326 C71.592, 95.816 77.415, 133.568 93.633, 134.592 C100.038, 134.996 95.468, 124.133 99.958, 122.092 C104.448, 120.051 110.368, 128.469 116.490, 132.551 C122.611, 136.633 133.320, 128.489 143.019, 138.265 C150.745, 146.051 148.326, 153.367 148.326, 155.000 C148.326, 156.633 150.402, 157.107 151.183, 160.307 C153.242, 168.739 151.590, 179.491 152.816, 182.755 C154.041, 186.020 165.222, 191.785 169.142, 193.776 C175.372, 196.940 178.529, 195.001 182.611, 197.858 C186.693, 200.714 185.877, 206.428 187.918, 208.879 C189.959, 211.330 197.509, 218.013 203.837, 218.267 C207.100, 218.398 203.837, 222.349 203.837, 222.349 C202.885, 222.349 201.932, 222.349 200.981, 222.349 C201.252, 223.301 201.524, 224.254 201.796, 225.206 C201.796, 225.206 200.162, 226.022 198.529, 225.206 C196.898, 224.390 198.631, 219.817 168.734, 206.839 C128.564, 189.400 132.990, 160.455 113.500, 152.961 C99.107, 147.427 98.938, 154.187 90.367, 155.817 C81.796, 157.450 54.040, 156.651 45.877, 165.614 C41.093, 170.866 43.836, 175.817 42.612, 179.083 C41.388, 182.349 40.163, 183.166 39.347, 186.839 C38.531, 190.513 41.388, 202.756 40.979, 209.287 C40.570, 215.817 37.714, 226.020 37.306, 231.328 C36.898, 236.635 38.532, 241.793 36.081, 245.206 C30.354, 253.185 28.059, 251.298 24.652, 253.369 C22.908, 254.431 23.428, 257.043 26.693, 257.043 C29.958, 257.043 28.734, 253.776 34.856, 255.410 C40.978, 257.043 36.897, 260.307 40.162, 260.307 C43.427, 260.307 41.260, 255.784 42.076, 250.069 C42.892, 244.356 49.958, 236.225 53.632, 215.817 C57.306, 195.410 51.999, 188.469 56.897, 182.348 C61.795, 176.225 59.754, 182.348 81.387, 177.451 C103.020, 172.553 118.529, 165.206 118.529, 165.206" /> 
  
  <path id="dog_cammel"  
      d="M87.673, 249.286 C87.673, 249.286 82.367, 190.408 82.367, 182.500 C82.367, 174.592 90.939, 164.796 100.735, 165.611 C110.531, 166.427 111.347, 179.490 109.714, 185.611 C108.081, 191.734 99.890, 201.618 91.347, 196.224 C82.804, 190.829 86.449, 181.937 90.939, 177.855 C95.429, 173.773 126.448, 162.753 141.143, 167.652 C155.838, 172.549 159.102, 195.406 161.959, 201.121 C164.816, 206.836 178.244, 224.132 179.994, 228.539 C182.919, 235.904 181.958, 246.837 179.918, 249.285 C177.878, 251.732 168.898, 254.999 166.449, 257.040 C164.000, 259.081 164.390, 264.478 164.390, 264.478 C164.390, 264.478 177.138, 265.611 180.773, 263.570 C184.408, 261.529 188.896, 230.101 189.304, 223.978 C189.712, 217.857 182.366, 217.855 180.325, 212.549 C178.284, 207.243 182.774, 188.467 181.141, 178.263 C179.507, 168.060 168.489, 152.957 167.264, 151.325 C166.038, 149.692 166.448, 134.590 153.385, 128.059 C140.323, 121.528 131.753, 131.325 127.671, 130.916 C123.589, 130.507 126.037, 121.528 119.100, 120.304 C112.162, 119.080 103.998, 123.978 100.326, 129.285 C96.653, 134.592 81.504, 181.455 60.734, 176.223 C38.580, 170.643 49.618, 129.661 58.285, 120.116 C59.634, 118.630 56.215, 113.756 50.858, 112.779 C45.501, 111.802 37.469, 115.612 33.796, 115.408 C26.448, 114.999 30.530, 104.795 41.142, 100.305 C51.754, 95.815 58.693, 96.632 58.693, 96.632 C58.693, 96.632 56.840, 106.168 61.305, 106.788 C67.847, 107.696 64.542, 93.155 62.977, 90.211 C62.573, 89.452 60.081, 96.508 59.494, 96.340
         
         C59.495, 96.341 96.682, 93.341 103.126, 115.000 C109.912, 137.808 117.785, 177.559 98.938, 177.474 C79.800, 177.388 82.334, 160.684 82.334, 160.684
         
         
         C82.333, 160.684 84.217, 143.717 86.217, 141.385 C88.217, 139.052 110.985, 141.718 116.985, 141.385 C122.985, 141.052 135.565, 137.025 149.231, 137.192 C162.899, 137.359 174.334, 137.667 176.001, 140.000 C177.668, 142.333 175.668, 152.334 177.668, 155.334 C179.668, 158.334 180.002, 160.001 182.335, 159.334 C184.668, 158.667 183.158, 142.991 183.824, 137.991 C184.489, 132.991 187.002, 126.000 186.335, 122.000 C185.668, 118.000 184.000, 118.000 184.000, 118.000 C184.000, 118.000 199.001, 115.333 198.334, 108.333 C198.022, 105.061 191.076, 110.267 179.139, 115.114 C165.541, 120.636 145.703, 126.156 126.000, 126.333 C89.000, 126.666 74.667, 115.333 68.667, 116.666 C62.667, 117.999 59.334, 128.666 59.000, 135.499 C58.666, 142.332 62.333, 156.666 66.667, 157.666 C71.001, 158.666 73.001, 141.895 73.334, 133.281 C73.667, 124.667 73.409, 110.797 66.742, 109.380 C60.075, 107.963 55.809, 118.106 51.143, 121.773 C46.477, 125.440 25.000, 136.000 24.667, 138.000 C24.334, 140.000 26.695, 141.741 33.695, 141.074 C40.695, 140.407 42.121, 140.775 43.334, 140.000 C44.547, 139.225 46.929, 137.145 49.726, 137.560 C53.056, 138.054 58.173, 135.217 58.173, 135.217" /> 
  
<path id="camel_flamingo"  
      d="M111.239, 148.289 C111.239, 148.289 112.176, 142.798 113.720, 141.789 C118.007, 138.991 117.062, 137.042 142.367, 149.287 C167.672, 161.532 166.856, 188.471 168.897, 172.960 C170.938, 157.449 170.938, 97.858 135.835, 85.613 C100.733, 73.368 76.243, 109.286 76.243, 109.286 C76.243, 109.286 75.019, 101.939 81.549, 90.102 C88.079, 78.265 90.937, 53.367 90.937, 45.204 C90.937, 37.041 86.448, 31.326 83.583, 30.918 C80.718, 30.510 77.875, 38.265 77.875, 38.265 C77.875, 38.265 70.025, 27.779 56.928, 40.876 C46.094, 51.709 57.981, 75.642 55.532, 65.030 C53.083, 54.418 57.572, 41.842 68.487, 45.204 C76.753, 47.750 79.686, 56.335 78.691, 66.429 C78.282, 70.571 75.425, 72.551 74.609, 76.225 C73.793, 79.899 75.834, 83.164 74.201, 86.429 C72.568, 89.694 62.316, 111.293 62.724, 121.497 C63.132, 131.701 74.200, 141.939 77.874, 141.939 C81.548, 141.939 92.160, 128.468 94.201, 128.061 C96.242, 127.653 101.548, 131.735 106.446, 140.000 C111.345, 148.266 114.201, 152.550 115.788, 161.938 C117.375, 171.327 114.609, 191.735 115.426, 211.327 C116.243, 230.919 115.426, 255.409 115.426, 255.409 C115.426, 255.409 109.712, 250.919 106.447, 248.878 C103.182, 246.837 102.926, 247.083 102.425, 247.733 C101.924, 248.384 101.957, 248.878 101.957, 248.878 C101.957, 249.694 101.957, 250.511 101.957, 251.327
         
         C101.959, 251.326 101.744, 257.166 94.899, 257.042 C88.054, 256.918 87.672, 249.286 87.672, 249.286
         
         C87.673, 249.286 82.367, 190.408 82.367, 182.500 C82.367, 174.592 90.939, 164.796 100.735, 165.611 C110.531, 166.427 111.347, 179.490 109.714, 185.611 C108.081, 191.734 99.890, 201.618 91.347, 196.224 C82.804, 190.829 86.449, 181.937 90.939, 177.855 C95.429, 173.773 126.448, 162.753 141.143, 167.652 C155.838, 172.549 159.102, 195.406 161.959, 201.121 C164.816, 206.836 178.244, 224.132 179.994, 228.539 C182.919, 235.904 181.958, 246.837 179.918, 249.285 C177.878, 251.732 168.898, 254.999 166.449, 257.040 C164.000, 259.081 164.390, 264.478 164.390, 264.478 C164.390, 264.478 177.138, 265.611 180.773, 263.570 C184.408, 261.529 188.896, 230.101 189.304, 223.978 C189.712, 217.857 182.366, 217.855 180.325, 212.549 C178.284, 207.243 182.774, 188.467 181.141, 178.263 C179.507, 168.060 168.489, 152.957 167.264, 151.325 C166.038, 149.692 166.448, 134.590 153.385, 128.059 C140.323, 121.528 131.753, 131.325 127.671, 130.916 C123.589, 130.507 126.037, 121.528 119.100, 120.304 C112.162, 119.080 103.998, 123.978 100.326, 129.285 C96.653, 134.592 81.504, 181.455 60.734, 176.223 C38.580, 170.643 49.618, 129.661 58.285, 120.116 C59.634, 118.630 56.215, 113.756 50.858, 112.779 C45.501, 111.802 37.469, 115.612 33.796, 115.408 C26.448, 114.999 30.530, 104.795 41.142, 100.305 C51.754, 95.815 58.693, 96.632 58.693, 96.632 C58.693, 96.632 56.840, 106.168 61.305, 106.788 C67.847, 107.696 64.542, 93.155 62.977, 90.211 C62.573, 89.452 60.081, 96.508 59.494, 96.340" />
  
</svg>

2

Этот ответ никак не считается за решением, только то, что я все таки смог сделать

<svg id="shape" xmlns="http://www.w3.org/2000/svg" width="749" height="463" viewBox="0 0 749 463">
     <path id="circle-path" d="m 674.99866,124.5625 c -0.45374,24.59557 -19.44732,45.72021 -34.23942,65.37578 -3.72941,4.95559 -8.62142,8.96395 -13.44848,12.8583 -4.85571,3.91746 -10.03521,7.48236 -15.50296,10.48706 -5.28729,2.90553 -10.73013,5.81399 -16.5975,7.21811 -5.57773,1.3348 -11.59501,2.34895 -17.17514,1.02425 -24.18683,-5.74185 -45.42641,-21.4906 -64.50617,-37.42592 -9.22049,-7.7009 -16.09946,-17.87426 -23.35117,-27.45205 -0.44028,-0.58151 -0.82493,-1.20337 -1.21968,-1.8167 -0.19757,-0.30697 -0.38641,-0.6195 -0.57476,-0.93222 -0.18836,-0.31274 -0.37393,-0.6272 -0.5553,-0.94404 -0.36279,-0.63378 -0.72607,-1.26765 -1.06585,-1.91407 -0.33967,-0.64619 -0.67649,-1.29503 -0.9719,-1.96262 -1.17568,-2.65684 -2.2422,-5.36542 -3.17956,-8.1154 -0.45809,-1.34393 -0.83836,-2.71429 -1.19192,-4.08942 -0.17651,-0.68654 -0.33786,-1.37783 -0.46346,-2.07547 -0.12527,-0.69588 -0.21894,-1.39784 -0.28873,-2.10144 -0.13693,-1.38036 -0.20967,-2.76719 -0.25452,-4.15359 -0.003,-0.0866 -0.002,-0.17325 -9e-4,-0.25987 9.5e-4,-0.0866 0.003,-0.17327 0.007,-0.25984 0.007,-0.17313 0.0138,-0.34638 0.0283,-0.51904 0.0289,-0.34486 0.0528,-0.69153 0.11702,-1.03159 0.12221,-0.64748 0.17948,-1.33931 0.50847,-1.91022 22.82193,-39.603981 51.91274,-89.234013 96.9635,-96.963501 23.89177,-4.09918 48.48175,14.199975 65.62264,31.340863 17.14089,17.140887 31.78798,41.385888 31.34086,65.622638 z">
	   <animate
	     calcMode="spline"
		 keySplines=" 0.185,0.675,0,0.995"
	     attributeName="d"
		 begin="shape.click"
		 dur="8s"
		 fill="freeze"
		 values="m 674.99866,124.5625 c -0.45374,24.59557 -19.44732,45.72021 -34.23942,65.37578 -3.72941,4.95559 -8.62142,8.96395 -13.44848,12.8583 -4.85571,3.91746 -10.03521,7.48236 -15.50296,10.48706 -5.28729,2.90553 -10.73013,5.81399 -16.5975,7.21811 -5.57773,1.3348 -11.59501,2.34895 -17.17514,1.02425 -24.18683,-5.74185 -45.42641,-21.4906 -64.50617,-37.42592 -9.22049,-7.7009 -16.09946,-17.87426 -23.35117,-27.45205 -0.44028,-0.58151 -0.82493,-1.20337 -1.21968,-1.8167 -0.19757,-0.30697 -0.38641,-0.6195 -0.57476,-0.93222 -0.18836,-0.31274 -0.37393,-0.6272 -0.5553,-0.94404 -0.36279,-0.63378 -0.72607,-1.26765 -1.06585,-1.91407 -0.33967,-0.64619 -0.67649,-1.29503 -0.9719,-1.96262 -1.17568,-2.65684 -2.2422,-5.36542 -3.17956,-8.1154 -0.45809,-1.34393 -0.83836,-2.71429 -1.19192,-4.08942 -0.17651,-0.68654 -0.33786,-1.37783 -0.46346,-2.07547 -0.12527,-0.69588 -0.21894,-1.39784 -0.28873,-2.10144 -0.13693,-1.38036 -0.20967,-2.76719 -0.25452,-4.15359 -0.003,-0.0866 -0.002,-0.17325 -9e-4,-0.25987 9.5e-4,-0.0866 0.003,-0.17327 0.007,-0.25984 0.007,-0.17313 0.0138,-0.34638 0.0283,-0.51904 0.0289,-0.34486 0.0528,-0.69153 0.11702,-1.03159 0.12221,-0.64748 0.17948,-1.33931 0.50847,-1.91022 22.82193,-39.603981 51.91274,-89.234013 96.9635,-96.963501 23.89177,-4.09918 48.48175,14.199975 65.62264,31.340863 17.14089,17.140887 31.78798,41.385888 31.34086,65.622638 z;
		 m 749,207.0058 c -18.06223,9.46176 -123.96958,73.16455 -136.28742,124.8784 -8.90288,37.37686 109.70285,35.38226 109.70285,35.38226 -31.68051,11.88586 -65.59579,21.81257 -99.23289,29.53083 -29.80007,6.83783 -82.57097,17.58862 -90.52461,14.78158 0,0 20.9372,-28.17187 9.92755,-40.28219 -35.38321,-38.9206 -191.87418,51.8573 -225.21727,1.67098 -8.64904,-13.0181 48.06162,-59.53316 41.19767,-76.50529 -7.32769,-18.11879 -145.52941,61.63927 -141.83251,97.86163 3.06801,30.06046 71.37285,21.78204 66.92344,35.6732 -5.08904,15.88811 -128.57422,36.62371 -140.52516,32.18149 C 113.89404,451.31094 130.97992,393.34487 29.10854,448.71063 -2.3484307,465.80708 49.49688,365.97289 98.075599,329.75901 192.27404,259.53708 399.60241,150.22925 394.81244,139.52904 388.1436,124.63168 0.69311377,341.62467 0.69311377,341.62467 c 0,0 6.37608863,-18.71807 208.28068623,-154.60766 23.43504,-15.77269 43.87968,-31.94948 -150.35819,36.78578 -25.382345,8.98209 -28.600954,-0.94028 -28.600954,-0.94028 -5.292285,-8.2597 35.407509,-33.54432 52.510483,-50.92172 C 98.894234,155.30904 124.96071,125.12366 130.45572,120.91412 278.44994,7.5407861 370.1732,-26.147314 346.84375,-0.00382012 c 0,0 -142.98116,78.60015212 -131.08203,99.49981712 5.42947,9.536333 77.60723,-37.667112 117.04746,-55.105805 C 368.18645,28.747955 420.50069,7.4382904 440.02344,-0.00781226 463.36747,-8.9113752 749,1.7226202e-4 749,1.7226202e-4 c 0,0 19.17026,196.96342773798 0,207.00562773798 z" />
	</path>	 
</svg>

По гайду выше все получилось, нужно лишь четко следовать требованиям

6
  • Конечно не критично, но можно было бы как-то выровнять фигуру похожую на круг, чтобы она реально была кругом. В принципе можно и так оставить, опять же не критично.
    – MoloF
    2 дек 2019 в 9:14
  • 1
    Увеличил время анимации, иначе не видно, как работает keySplines=" 0.185,0.675,0,0.995" Сначала быстро на финише очень медленно. Для первого раза хорошо получилось. Поздравляю Дальше можно будет делать более сложные анимации морфинга :) 2 дек 2019 в 11:37
  • @Alexandr_TT не подскажите более сложные анимации? Хочу посмотреть на сложные вещи
    – MoloF
    2 дек 2019 в 12:39
  • сейчас добавлю во второй ответ, который с нулем ходит :) 2 дек 2019 в 12:45
  • 1
    @Alexandr_TT , спасибо за ответы, очень познавательно, возьму себе на вооружение
    – MoloF
    2 дек 2019 в 14:09
0

Для полноты вариантов решения, хочу добавить ещё один ответ.

Морфинг по картинам Pablo Picasso

Пример не мой, когда то давно скачал и сейчас не могу найти ссылку. Буду благодарен, за ссылку на источник.

Смотреть интересней на полном экране сниппета.

let drawings = [
  "flamingo_pinguin",
  "pinguin_lady",
  "lady_dog",
  "dog_cammel",
  "camel_flamingo"
];

for (let i = 0; i < drawings.length; i++) {
  let drawing = document.querySelector(`#${drawings[i]}`);
  let n = i + 1 < drawings.length ? i + 1 : 0;
  let next = document.querySelector(`#${drawings[n]}`);

  drawing.addEventListener(
    "webkitAnimationEnd",
    () => {
      drawing.classList.remove("animated");
      next.classList.add("animated");
    },
    false
  );

  drawing.addEventListener(
    "animationend ",
    () => {
      drawing.classList.remove("animated");
      next.classList.add("animated");
    },
    false
  );
}
body{background:Snow}

svg {
  background:white;
  display: block;
  width: 60vh;
  box-shadow: 0px 5px 10px #888;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
path {
  fill: none;
  stroke: black;
}

/******************************/
#flamingo_pinguin {
  display: none;
  stroke-dasharray: 1531px; /* length */
  stroke-dashoffset: 2246px; /* length + C */
}
#flamingo_pinguin.animated {
  display: block;
  animation: flamingoPinguin 2s linear forwards;
  animation-delay: 2s;
}

@keyframes flamingoPinguin {
  100% {
    stroke-dashoffset: 3869px; /* 2*length + B + C */
  }
}

/******************************/
#pinguin_lady {
  display: none;
  stroke-dasharray: 2130px; /* length */
  stroke-dashoffset: 2853px; /* length + C */
}
#pinguin_lady.animated {
  display: block;
  animation: pinguinLady 2s linear forwards;
  animation-delay: 2s;
}

@keyframes pinguinLady {
  100% {
    stroke-dashoffset: 5162px; /* 2*length + B + C */
  }
}

/******************************/

#lady_dog {
  display: none;
  stroke-dasharray: 1812px; /* length */
  stroke-dashoffset: 3040px; /* length + C */
}
#lady_dog.animated {
  display: block;
  animation: ladyDog 2s linear forwards;
  animation-delay: 2s;
}

@keyframes ladyDog {
  100% {
    stroke-dashoffset: 4920px; /* 2*length + B + C */
  }
}

/******************************/
#dog_cammel {
  display: none;
  stroke-dasharray: 1467px; /* length */
  stroke-dashoffset: 1984px; /* length + C */
}
#dog_cammel.animated {
  display: block;
  animation: dogCammel 2s linear forwards;
  animation-delay: 2s;
}

@keyframes dogCammel {
  100% {
    stroke-dashoffset: 3599px; /* 2*length + B + C */
  }
}

/******************************/

#camel_flamingo {
  display: none;
  stroke-dasharray: 1540px; /* length */
  stroke-dashoffset: 2343px; /* length + C */
}
#camel_flamingo.animated {
  display: block;
  animation: camelFlamingo 2s linear forwards;
  animation-delay: 2s;
}

@keyframes camelFlamingo {
  100% {
    stroke-dashoffset: 3905px; /* 2*length + B + C */
  }
}
<svg viewBox="0 0 225 280" >

<!-- pinguin connnexion flamingo -->
<path id="flamingo_pinguin"  
      d="M87.953, 226.174C87.953, 226.174 89.174, 221.233 90.887, 221.660 C92.600, 222.087 98.043, 229.498 99.119, 227.644 C102.398, 221.998 94.407, 195.945 93.121, 188.663 C91.835, 181.381 88.274, 149.209 87.124, 136.401 C85.244, 115.469 99.294, 83.323 98.561, 76.422 C97.574, 67.131 69.561, 59.721 69.561, 59.721 C74.563, 60.022 79.565, 60.322 84.567, 60.623 C84.567, 60.623 91.225, 60.510 99.412, 59.721 C104.311, 59.248 109.135, 61.534 108.830, 64.121 C108.258, 68.977 86.696, 64.511 86.696, 59.546 C86.696, 54.581 92.772, 48.835 107.294, 49.440 C128.285, 50.315 141.570, 63.192 149.238, 128.690 C159.092, 212.878 147.095, 234.499 144.097, 234.499 C141.099, 234.499 122.679, 177.525 118.824, 153.536 C114.969, 129.547 115.595, 107.437 121.394, 102.559 C122.146, 101.927 121.747, 95.259 119.840, 94.161 C118.679, 93.492 109.247, 111.865 107.256, 110.698 C103.072, 108.246 109.358, 85.535 119.210, 80.823 C129.062, 76.111 130.388, 91.421 130.388, 91.421
                                
               C130.389, 91.421 133.862, 99.702 135.415, 109.129 C137.234, 120.171 137.149, 132.808 136.714, 135.892 C130.364, 180.838 111.239, 148.289 111.239, 148.289
   
C111.239, 148.289 112.176, 142.798 113.720, 141.789 C118.007, 138.991 117.062, 137.042 142.367, 149.287 C167.672, 161.532 166.856, 188.471 168.897, 172.960 C170.938, 157.449 170.938, 97.858 135.835, 85.613 C100.733, 73.368 76.243, 109.286 76.243, 109.286 C76.243, 109.286 75.019, 101.939 81.549, 90.102 C88.079, 78.265 90.937, 53.367 90.937, 45.204 C90.937, 37.041 86.448, 31.326 83.583, 30.918 C80.718, 30.510 77.875, 38.265 77.875, 38.265 C77.875, 38.265 70.025, 27.779 56.928, 40.876 C46.094, 51.709 57.981, 75.642 55.532, 65.030 C53.083, 54.418 57.572, 41.842 68.487, 45.204 C76.753, 47.750 79.686, 56.335 78.691, 66.429 C78.282, 70.571 75.425, 72.551 74.609, 76.225 C73.793, 79.899 75.834, 83.164 74.201, 86.429 C72.568, 89.694 62.316, 111.293 62.724, 121.497 C63.132, 131.701 74.200, 141.939 77.874, 141.939 C81.548, 141.939 92.160, 128.468 94.201, 128.061 C96.242, 127.653 101.548, 131.735 106.446, 140.000 C111.345, 148.266 114.201, 152.550 115.788, 161.938 C117.375, 171.327 114.609, 191.735 115.426, 211.327 C116.243, 230.919 115.426, 255.409 115.426, 255.409 C115.426, 255.409 109.712, 250.919 106.447, 248.878 C103.182, 246.837 102.926, 247.083 102.425, 247.733 C101.924, 248.384 101.957, 248.878 101.957, 248.878 C101.957, 249.694 101.957, 250.511 101.957, 251.327" /> 
  
<path id="pinguin_lady"  class="animated"
      d="M85.469, 82.755 C85.469, 82.755 96.081, 76.633 97.306, 73.367 C98.531, 70.101 94.857, 64.388 95.673, 63.163 C96.489, 61.938 99.755, 63.163 99.755, 63.163 C99.755, 63.163 99.427, 60.181 100.859, 60.521 C102.581, 60.931 100.295, 56.588 102.744, 56.996 C105.193, 57.404 100.353, 52.976 103.892, 52.160 C107.431, 51.344 118.576, 53.075 121.025, 56.341 C123.474, 59.607 124.654, 63.392 121.388, 66.747 C118.121, 70.102 107.752, 76.960 109.550, 82.755 C110.613, 86.181 127.101, 76.225 138.121, 73.776 C149.142, 71.327 156.489, 67.245 166.285, 62.755 C176.081, 58.265 178.752, 54.753 181.201, 51.668 C183.649, 48.583 186.692, 37.449 187.917, 37.857 C189.142, 38.265 187.509, 43.571 187.917, 45.612 C188.325, 47.653 190.774, 46.428 190.774, 46.428 C190.774, 46.428 188.326, 50.102 186.692, 53.775 C185.059, 57.448 183.835, 62.346 177.713, 67.244 C171.591, 72.142 168.325, 72.958 161.795, 75.815 C155.265, 78.672 151.562, 82.262 141.765, 85.528 C131.970, 88.794 119.081, 89.285 113.499, 93.775 C107.917, 98.265 105.061, 110.102 99.346, 109.693 C93.632, 109.284 96.898, 96.633 92.000, 95.000 C87.102, 93.367 83.429, 101.939 78.531, 99.898 C73.633, 97.857 73.633, 92.551 76.898, 86.428 C80.163, 80.305 79.439, 78.195 76.082, 73.774 C70.691, 66.675 53.225, 76.224 47.511, 75.816 C41.797, 75.408 36.490, 65.204 33.225, 57.449 C29.960, 49.694 23.837, 41.939 23.837, 41.939 C23.837, 41.939 22.613, 46.837 23.837, 48.878 C25.061, 50.919 22.204, 48.878 20.980, 48.878 C19.756, 48.878 24.654, 52.143 27.511, 57.449 C30.368, 62.755 31.802, 74.963 36.915, 81.595 C45.372, 92.565 60.164, 86.836 65.878, 91.326 C71.592, 95.816 77.415, 133.568 93.633, 134.592 C100.038, 134.996 95.468, 124.133 99.958, 122.092 C104.448, 120.051 110.368, 128.469 116.490, 132.551 C122.611, 136.633 133.320, 128.489 143.019, 138.265 C150.745, 146.051 148.326, 153.367 148.326, 155.000 C148.326, 156.633 150.402, 157.107 151.183, 160.307 C153.242, 168.739 151.590, 179.491 152.816, 182.755 C154.041, 186.020 165.222, 191.785 169.142, 193.776 C175.372, 196.940 178.529, 195.001 182.611, 197.858 C186.693, 200.714 185.877, 206.428 187.918, 208.879 C189.959, 211.330 197.509, 218.013 203.837, 218.267 C207.100, 218.398 203.837, 222.349 203.837, 222.349 C202.885, 222.349 201.932, 222.349 200.981, 222.349 C201.252, 223.301 201.524, 224.254 201.796, 225.206 C201.796, 225.206 200.162, 226.022 198.529, 225.206 C196.898, 224.390 198.631, 219.817 168.734, 206.839 C128.564, 189.400 132.990, 160.455 113.500, 152.961 C99.107, 147.427 98.938, 154.187 90.367, 155.817 C81.796, 157.450 54.040, 156.651 45.877, 165.614 C41.093, 170.866 43.836, 175.817 42.612, 179.083 C41.388, 182.349 40.163, 183.166 39.347, 186.839 C38.531, 190.513 41.388, 202.756 40.979, 209.287 C40.570, 215.817 37.714, 226.020 37.306, 231.328 C36.898, 236.635 38.532, 241.793 36.081, 245.206 C30.354, 253.185 28.059, 251.298 24.652, 253.369 C22.908, 254.431 23.428, 257.043 26.693, 257.043 C29.958, 257.043 28.734, 253.776 34.856, 255.410 C40.978, 257.043 36.897, 260.307 40.162, 260.307 C43.427, 260.307 41.260, 255.784 42.076, 250.069 C42.892, 244.356 49.958, 236.225 53.632, 215.817 C57.306, 195.410 51.999, 188.469 56.897, 182.348 C61.795, 176.225 59.754, 182.348 81.387, 177.451 C103.020, 172.553 118.529, 165.206 118.529, 165.206
         
         C118.529, 165.205 198.122, 132.459 140.979, 219.806 C103.052, 277.780 87.953, 226.174 87.953, 226.174 
         
         C87.953, 226.174 89.174, 221.233 90.887, 221.660 C92.600, 222.087 98.043, 229.498 99.119, 227.644 C102.398, 221.998 94.407, 195.945 93.121, 188.663 C91.835, 181.381 88.274, 149.209 87.124, 136.401 C85.244, 115.469 99.294, 83.323 98.561, 76.422 C97.574, 67.131 69.561, 59.721 69.561, 59.721 C74.563, 60.022 79.565, 60.322 84.567, 60.623 C84.567, 60.623 91.225, 60.510 99.412, 59.721 C104.311, 59.248 109.135, 61.534 108.830, 64.121 C108.258, 68.977 86.696, 64.511 86.696, 59.546 C86.696, 54.581 92.772, 48.835 107.294, 49.440 C128.285, 50.315 141.570, 63.192 149.238, 128.690 C159.092, 212.878 147.095, 234.499 144.097, 234.499 C141.099, 234.499 122.679, 177.525 118.824, 153.536 C114.969, 129.547 115.595, 107.437 121.394, 102.559 C122.146, 101.927 121.747, 95.259 119.840, 94.161 C118.679, 93.492 109.247, 111.865 107.256, 110.698 C103.072, 108.246 109.358, 85.535 119.210, 80.823 C129.062, 76.111 130.388, 91.421 130.388, 91.421" />
  
<!-- dog connnexion pinguin -->
<path id="lady_dog"  
      d="M82.333, 160.684 C82.333, 160.684 84.217, 143.717 86.217, 141.385 C88.217, 139.052 110.985, 141.718 116.985, 141.385 C122.985, 141.052 135.565, 137.025 149.231, 137.192 C162.899, 137.359 174.334, 137.667 176.001, 140.000 C177.668, 142.333 175.668, 152.334 177.668, 155.334 C179.668, 158.334 180.002, 160.001 182.335, 159.334 C184.668, 158.667 183.158, 142.991 183.824, 137.991 C184.489, 132.991 187.002, 126.000 186.335, 122.000 C185.668, 118.000 184.000, 118.000 184.000, 118.000 C184.000, 118.000 199.001, 115.333 198.334, 108.333 C198.022, 105.061 191.076, 110.267 179.139, 115.114 C165.541, 120.636 145.703, 126.156 126.000, 126.333 C89.000, 126.666 74.667, 115.333 68.667, 116.666 C62.667, 117.999 59.334, 128.666 59.000, 135.499 C58.666, 142.332 62.333, 156.666 66.667, 157.666 C71.001, 158.666 73.001, 141.895 73.334, 133.281 C73.667, 124.667 73.409, 110.797 66.742, 109.380 C60.075, 107.963 55.809, 118.106 51.143, 121.773 C46.477, 125.440 25.000, 136.000 24.667, 138.000 C24.334, 140.000 26.695, 141.741 33.695, 141.074 C40.695, 140.407 42.121, 140.775 43.334, 140.000 C44.547, 139.225 46.929, 137.145 49.726, 137.560 C53.056, 138.054 58.173, 135.217 58.173, 135.217
         
       C58.173, 135.217 70.979, 132.054 71.821, 123.537 C72.360, 118.079 66.210, 111.530 69.754, 98.321 C72.541, 87.933 85.469, 82.755 85.469, 82.755
         
         
         C85.469, 82.755 96.081, 76.633 97.306, 73.367 C98.531, 70.101 94.857, 64.388 95.673, 63.163 C96.489, 61.938 99.755, 63.163 99.755, 63.163 C99.755, 63.163 99.427, 60.181 100.859, 60.521 C102.581, 60.931 100.295, 56.588 102.744, 56.996 C105.193, 57.404 100.353, 52.976 103.892, 52.160 C107.431, 51.344 118.576, 53.075 121.025, 56.341 C123.474, 59.607 124.654, 63.392 121.388, 66.747 C118.121, 70.102 107.752, 76.960 109.550, 82.755 C110.613, 86.181 127.101, 76.225 138.121, 73.776 C149.142, 71.327 156.489, 67.245 166.285, 62.755 C176.081, 58.265 178.752, 54.753 181.201, 51.668 C183.649, 48.583 186.692, 37.449 187.917, 37.857 C189.142, 38.265 187.509, 43.571 187.917, 45.612 C188.325, 47.653 190.774, 46.428 190.774, 46.428 C190.774, 46.428 188.326, 50.102 186.692, 53.775 C185.059, 57.448 183.835, 62.346 177.713, 67.244 C171.591, 72.142 168.325, 72.958 161.795, 75.815 C155.265, 78.672 151.562, 82.262 141.765, 85.528 C131.970, 88.794 119.081, 89.285 113.499, 93.775 C107.917, 98.265 105.061, 110.102 99.346, 109.693 C93.632, 109.284 96.898, 96.633 92.000, 95.000 C87.102, 93.367 83.429, 101.939 78.531, 99.898 C73.633, 97.857 73.633, 92.551 76.898, 86.428 C80.163, 80.305 79.439, 78.195 76.082, 73.774 C70.691, 66.675 53.225, 76.224 47.511, 75.816 C41.797, 75.408 36.490, 65.204 33.225, 57.449 C29.960, 49.694 23.837, 41.939 23.837, 41.939 C23.837, 41.939 22.613, 46.837 23.837, 48.878 C25.061, 50.919 22.204, 48.878 20.980, 48.878 C19.756, 48.878 24.654, 52.143 27.511, 57.449 C30.368, 62.755 31.802, 74.963 36.915, 81.595 C45.372, 92.565 60.164, 86.836 65.878, 91.326 C71.592, 95.816 77.415, 133.568 93.633, 134.592 C100.038, 134.996 95.468, 124.133 99.958, 122.092 C104.448, 120.051 110.368, 128.469 116.490, 132.551 C122.611, 136.633 133.320, 128.489 143.019, 138.265 C150.745, 146.051 148.326, 153.367 148.326, 155.000 C148.326, 156.633 150.402, 157.107 151.183, 160.307 C153.242, 168.739 151.590, 179.491 152.816, 182.755 C154.041, 186.020 165.222, 191.785 169.142, 193.776 C175.372, 196.940 178.529, 195.001 182.611, 197.858 C186.693, 200.714 185.877, 206.428 187.918, 208.879 C189.959, 211.330 197.509, 218.013 203.837, 218.267 C207.100, 218.398 203.837, 222.349 203.837, 222.349 C202.885, 222.349 201.932, 222.349 200.981, 222.349 C201.252, 223.301 201.524, 224.254 201.796, 225.206 C201.796, 225.206 200.162, 226.022 198.529, 225.206 C196.898, 224.390 198.631, 219.817 168.734, 206.839 C128.564, 189.400 132.990, 160.455 113.500, 152.961 C99.107, 147.427 98.938, 154.187 90.367, 155.817 C81.796, 157.450 54.040, 156.651 45.877, 165.614 C41.093, 170.866 43.836, 175.817 42.612, 179.083 C41.388, 182.349 40.163, 183.166 39.347, 186.839 C38.531, 190.513 41.388, 202.756 40.979, 209.287 C40.570, 215.817 37.714, 226.020 37.306, 231.328 C36.898, 236.635 38.532, 241.793 36.081, 245.206 C30.354, 253.185 28.059, 251.298 24.652, 253.369 C22.908, 254.431 23.428, 257.043 26.693, 257.043 C29.958, 257.043 28.734, 253.776 34.856, 255.410 C40.978, 257.043 36.897, 260.307 40.162, 260.307 C43.427, 260.307 41.260, 255.784 42.076, 250.069 C42.892, 244.356 49.958, 236.225 53.632, 215.817 C57.306, 195.410 51.999, 188.469 56.897, 182.348 C61.795, 176.225 59.754, 182.348 81.387, 177.451 C103.020, 172.553 118.529, 165.206 118.529, 165.206" /> 
  
  <path id="dog_cammel"  
      d="M87.673, 249.286 C87.673, 249.286 82.367, 190.408 82.367, 182.500 C82.367, 174.592 90.939, 164.796 100.735, 165.611 C110.531, 166.427 111.347, 179.490 109.714, 185.611 C108.081, 191.734 99.890, 201.618 91.347, 196.224 C82.804, 190.829 86.449, 181.937 90.939, 177.855 C95.429, 173.773 126.448, 162.753 141.143, 167.652 C155.838, 172.549 159.102, 195.406 161.959, 201.121 C164.816, 206.836 178.244, 224.132 179.994, 228.539 C182.919, 235.904 181.958, 246.837 179.918, 249.285 C177.878, 251.732 168.898, 254.999 166.449, 257.040 C164.000, 259.081 164.390, 264.478 164.390, 264.478 C164.390, 264.478 177.138, 265.611 180.773, 263.570 C184.408, 261.529 188.896, 230.101 189.304, 223.978 C189.712, 217.857 182.366, 217.855 180.325, 212.549 C178.284, 207.243 182.774, 188.467 181.141, 178.263 C179.507, 168.060 168.489, 152.957 167.264, 151.325 C166.038, 149.692 166.448, 134.590 153.385, 128.059 C140.323, 121.528 131.753, 131.325 127.671, 130.916 C123.589, 130.507 126.037, 121.528 119.100, 120.304 C112.162, 119.080 103.998, 123.978 100.326, 129.285 C96.653, 134.592 81.504, 181.455 60.734, 176.223 C38.580, 170.643 49.618, 129.661 58.285, 120.116 C59.634, 118.630 56.215, 113.756 50.858, 112.779 C45.501, 111.802 37.469, 115.612 33.796, 115.408 C26.448, 114.999 30.530, 104.795 41.142, 100.305 C51.754, 95.815 58.693, 96.632 58.693, 96.632 C58.693, 96.632 56.840, 106.168 61.305, 106.788 C67.847, 107.696 64.542, 93.155 62.977, 90.211 C62.573, 89.452 60.081, 96.508 59.494, 96.340
         
         C59.495, 96.341 96.682, 93.341 103.126, 115.000 C109.912, 137.808 117.785, 177.559 98.938, 177.474 C79.800, 177.388 82.334, 160.684 82.334, 160.684
         
         
         C82.333, 160.684 84.217, 143.717 86.217, 141.385 C88.217, 139.052 110.985, 141.718 116.985, 141.385 C122.985, 141.052 135.565, 137.025 149.231, 137.192 C162.899, 137.359 174.334, 137.667 176.001, 140.000 C177.668, 142.333 175.668, 152.334 177.668, 155.334 C179.668, 158.334 180.002, 160.001 182.335, 159.334 C184.668, 158.667 183.158, 142.991 183.824, 137.991 C184.489, 132.991 187.002, 126.000 186.335, 122.000 C185.668, 118.000 184.000, 118.000 184.000, 118.000 C184.000, 118.000 199.001, 115.333 198.334, 108.333 C198.022, 105.061 191.076, 110.267 179.139, 115.114 C165.541, 120.636 145.703, 126.156 126.000, 126.333 C89.000, 126.666 74.667, 115.333 68.667, 116.666 C62.667, 117.999 59.334, 128.666 59.000, 135.499 C58.666, 142.332 62.333, 156.666 66.667, 157.666 C71.001, 158.666 73.001, 141.895 73.334, 133.281 C73.667, 124.667 73.409, 110.797 66.742, 109.380 C60.075, 107.963 55.809, 118.106 51.143, 121.773 C46.477, 125.440 25.000, 136.000 24.667, 138.000 C24.334, 140.000 26.695, 141.741 33.695, 141.074 C40.695, 140.407 42.121, 140.775 43.334, 140.000 C44.547, 139.225 46.929, 137.145 49.726, 137.560 C53.056, 138.054 58.173, 135.217 58.173, 135.217" /> 
  
<path id="camel_flamingo"  
      d="M111.239, 148.289 C111.239, 148.289 112.176, 142.798 113.720, 141.789 C118.007, 138.991 117.062, 137.042 142.367, 149.287 C167.672, 161.532 166.856, 188.471 168.897, 172.960 C170.938, 157.449 170.938, 97.858 135.835, 85.613 C100.733, 73.368 76.243, 109.286 76.243, 109.286 C76.243, 109.286 75.019, 101.939 81.549, 90.102 C88.079, 78.265 90.937, 53.367 90.937, 45.204 C90.937, 37.041 86.448, 31.326 83.583, 30.918 C80.718, 30.510 77.875, 38.265 77.875, 38.265 C77.875, 38.265 70.025, 27.779 56.928, 40.876 C46.094, 51.709 57.981, 75.642 55.532, 65.030 C53.083, 54.418 57.572, 41.842 68.487, 45.204 C76.753, 47.750 79.686, 56.335 78.691, 66.429 C78.282, 70.571 75.425, 72.551 74.609, 76.225 C73.793, 79.899 75.834, 83.164 74.201, 86.429 C72.568, 89.694 62.316, 111.293 62.724, 121.497 C63.132, 131.701 74.200, 141.939 77.874, 141.939 C81.548, 141.939 92.160, 128.468 94.201, 128.061 C96.242, 127.653 101.548, 131.735 106.446, 140.000 C111.345, 148.266 114.201, 152.550 115.788, 161.938 C117.375, 171.327 114.609, 191.735 115.426, 211.327 C116.243, 230.919 115.426, 255.409 115.426, 255.409 C115.426, 255.409 109.712, 250.919 106.447, 248.878 C103.182, 246.837 102.926, 247.083 102.425, 247.733 C101.924, 248.384 101.957, 248.878 101.957, 248.878 C101.957, 249.694 101.957, 250.511 101.957, 251.327
         
         C101.959, 251.326 101.744, 257.166 94.899, 257.042 C88.054, 256.918 87.672, 249.286 87.672, 249.286
         
         C87.673, 249.286 82.367, 190.408 82.367, 182.500 C82.367, 174.592 90.939, 164.796 100.735, 165.611 C110.531, 166.427 111.347, 179.490 109.714, 185.611 C108.081, 191.734 99.890, 201.618 91.347, 196.224 C82.804, 190.829 86.449, 181.937 90.939, 177.855 C95.429, 173.773 126.448, 162.753 141.143, 167.652 C155.838, 172.549 159.102, 195.406 161.959, 201.121 C164.816, 206.836 178.244, 224.132 179.994, 228.539 C182.919, 235.904 181.958, 246.837 179.918, 249.285 C177.878, 251.732 168.898, 254.999 166.449, 257.040 C164.000, 259.081 164.390, 264.478 164.390, 264.478 C164.390, 264.478 177.138, 265.611 180.773, 263.570 C184.408, 261.529 188.896, 230.101 189.304, 223.978 C189.712, 217.857 182.366, 217.855 180.325, 212.549 C178.284, 207.243 182.774, 188.467 181.141, 178.263 C179.507, 168.060 168.489, 152.957 167.264, 151.325 C166.038, 149.692 166.448, 134.590 153.385, 128.059 C140.323, 121.528 131.753, 131.325 127.671, 130.916 C123.589, 130.507 126.037, 121.528 119.100, 120.304 C112.162, 119.080 103.998, 123.978 100.326, 129.285 C96.653, 134.592 81.504, 181.455 60.734, 176.223 C38.580, 170.643 49.618, 129.661 58.285, 120.116 C59.634, 118.630 56.215, 113.756 50.858, 112.779 C45.501, 111.802 37.469, 115.612 33.796, 115.408 C26.448, 114.999 30.530, 104.795 41.142, 100.305 C51.754, 95.815 58.693, 96.632 58.693, 96.632 C58.693, 96.632 56.840, 106.168 61.305, 106.788 C67.847, 107.696 64.542, 93.155 62.977, 90.211 C62.573, 89.452 60.081, 96.508 59.494, 96.340" />
  
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.