Пояснение работы элементов анимации
#1.Покачивание луны

Для равномерного покачивания луны необходимо найти точные координаты верхнего уголка зеленой шляпы, чтобы подставить их в команду анимации вращения
let bb = moon.getBBox();
console.log( bb.x + bb.width / 2 ); // координата X
console.log(bb.y); // координата Y
Получилось x="1753"
и y="10"
<animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="svg1.click" dur="6s" values="30,1753,10.4;
10,1753,10.4;
20,1753,10.4;
-30,1753,10.4;
0,1753,10.4;
30,1753,10.4"
keyTimes="0;0.15;0.25;0.45;0.85;1"
repeatCount="indefinite"
/>
Атрибут keyTimes="0;0.15;0.25;0.45;0.85;1"
задает неравномерную скорость вращения луны.
.container {
width:100vw;
height:100vh;
}
.s0{
fill:none;
stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}
<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2787 768"preserveAspectRatio="xMinYMin meet" style="border:1px solid;">
<image xlink:href="https://i.stack.imgur.com/bhgP9.jpg" height="100%" width="100%"/>
<g id="hat" transform="translate(-1320,-180)" >
<path d="m1299.3 183.9 46.5-16.7 2.7 6-46.7 16.7zM1308.9 180.6l-10.2-29.1 28.5-9.9 10.4 28.8" />
<path d="m1308.9 180.6-10.2-29.1 28.5-9.9 10.4 28.8z" />
</g>
<g id="winterHat" stroke="#971B59" stroke-width="2" >
<path fill="#2FBAE5" d="M938.7 261.2H1063.9V631.7H938.7Z" />
<path d="M957.4 261.2V631.7" />
<path d="M976.1 261.2V631.7" />
<path d="M993.2 261.2V631.7" />
<path d="M1009.4 261.2V631.7" />
<path d="M1025.5 261.2V631.7" />
<path d="M1045.1 261.2V631.7" />
<path d="M1063.9 261.2V631.7" />
<path id="brimHat" fill="#FCB660" d="M938.7 194.3 927.9 194.1c0 0-13.2 0.4-18.7 3.5-3.8 2.2-7.1 5.8-8.7 9.9-1.8 4.4-1 9.4-0.6 14.2 0.4 4.7 1.2 9.5 3 13.9 1.9 4.5 4.8 8.6 7.8 12.3 4 4.9 8.3 9.7 13.6 13.3 6.4 4.3 13.8 6.9 21.1 9.3 6.9 2.3 14.2 3.7 21.4 4.8 6.1 1 12.2 1.2 18.4 1.8 5.9 0.5 11.8 1.4 17.8 1.5 4.9 0.1 9.9-0.2 14.8-0.6 5.6-0.5 11.3-1.1 16.9-2.1 6.7-1.2 13.3-2.6 19.9-4.5 8.3-2.4 16.9-4.3 24.4-8.6 6.4-3.6 12.1-8.5 16.9-14 4.5-5.3 8.4-11.3 10.8-17.8 2-5.4 4-11.5 2.7-17.2-1.3-5.8-5.1-11.3-9.9-14.8-3.6-2.5-12.6-3.3-12.6-3.3l-12.9-0.6z" />
<path id="brimHat2" fill="#971B59" d="m924.2 194.3c0 0-5.5 6.6-6.6 10.5-0.9 3.3-0.6 6.9 0 10.2 0.8 4.3 2.3 8.6 4.5 12.3 2.2 3.8 5.3 6.9 8.4 9.9 4 3.9 8.4 7.5 13.3 10.2 6.3 3.5 13.2 5.7 20.2 7.5 7 1.9 14.2 2.9 21.4 3.6 5.1 0.6 10.2 0.7 15.4 0.8 5.7 0 11.5-0.4 17.2-0.8 6.5-0.4 13.1-0.7 19.6-1.8 6.3-1.1 12.7-2.3 18.7-4.8 6.5-2.7 12.8-6.2 18.1-10.8 6-5.4 11.9-11.7 14.8-19.3 2.1-5.8 2.9-12.5 1.1-18.4-1.1-3.6-7.1-8.7-7.1-8.7z" />
<path id="topHat" fill="#FCB660" d="m938.7 217.8c0 0-1.2-24.8-1.9-37.1-1.2-21.7-2.3-42.8-3.9-65-0.3-4-2.2-10.5 5.8-10.5 40 0 84.2-2.1 125.6 0.5 4.1 0.3 10.9-0.5 11.8 3.4 0.7 3-0.4 7.8-0.4 7.8l-4.2 53.6-2.9 47.1z" />
<path id="bottomHat" fill="#FEFBFE" d="m938.7 221.1 129.4 0.1-0.5 16.7c0 0-38.7 5.5-58.2 5.7-22.6 0.2-67.7-5.4-67.7-5.4z" />
</g>
<!-- Анимация шляпы на синих прямоугольниках -->
<animateTransform id="an_BigHat" xlink:href="#winterHat" attributeName="transform" type="translate" begin="svg1.click;an_BigHat.end+3s" dur="4s" values="0,0;0,250;0,0;0,300;0,250;0,400;0,100;0,500;0,0" repeatCount="1" />
<!-- Луна -->
<g stroke="#971B59" stroke-width="2" transform="rotate(30,1753,10.4)">
<path id="moon" fill="#8BECBD" d="m1729 45 28-35 36 31-28 33zM1717 37l58 48-5 8-57-49M1717 37l58 48-5 8-57-49" />
<path fill="#8BECBD" d="m1717 37 58 48-5 8-57-49z" />
<path fill="#FFFBFF" d="m1724 54c0 0-11 15-15 23-4 9-7 19-8 30-1 10 0 21 3 31 2 9 6 18 11 25 5 7 10 13 17 18 8 6 16 11 25 15 11 4 23 6 34 5 9 0 19-3 27-6 5-2 11-4 15-7 6-4 11-8 16-13 2-2 5-7 5-7l-15 3-17 0-20-5-14-7-14-13-10-15-3-6c0 0 3-1 4-1 1-1 2-2 3-3 1-2 1-4 0-6 0-1-2-1-2-2-1-1-3-2-4-4-1-1-2-2-3-4-1-2-2-4-3-6 0-4 2-13 2-13z" />
<path d="m1746 128c0 0 6 6 9 7 4 1 12 0 12 0" />
<path d="m1745 96c2 0 4 1 4 2 1 1 1 3 0 4-1 1-2 2-3 2-1 0-3-1-4-2-1-1-1-2 0-4 1-1 2-2 3-2z" />
<!-- Анимация луны an_hat.end-->
<animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="svg1.click" dur="6s" values="30,1753,10.4;
10,1753,10.4;
20,1753,10.4;
-30,1753,10.4;
0,1753,10.4;
30,1753,10.4"
keyTimes="0;0.15;0.25;0.45;0.85;1"
repeatCount="indefinite"
/>
</g>
</svg>
</div>
<script>
let bb = moon.getBBox();
console.log( bb.x + bb.width / 2 ); // координата X
console.log(bb.y); // координата Y
</script>
#2. Летающие шляпы

Шляпы (растровые изображения) вначале спрятаны за верхним краем холста.
При наступлении определенного времени или других условий, включается команда трансформации перемещения шляп.
<image filter="url(#dropShadow)" id="Carnaval" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/e2Khg.png" width="206px" height="218px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+3s" dur="3s"
values="0 0;-250 800" fill="freeze" additive="sum" repeatCount="1" />
</image>
<style>
.container {
width:100vw;
height:100vh;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/bhgP9.jpg" height="100%" width="100%"/>
<g>
<image filter="url(#dropShadow)" id="GimmeSpace" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/4CE3b.png" width="206px" height="218px">
<animateTransform id="an_Gimme" attributeName="transform" type="translate" begin="svg1.click+0.25s" dur="3s"
values="0 0;-400 800" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Carnaval" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/e2Khg.png" width="206px" height="218px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+3s" dur="3s"
values="0 0;-250 800" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="ThisIsFine" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/SFTT7.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+6s" dur="3s"
values="0 0;50 780" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Kitsune" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/q507j.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+8s" dur="3s"
values="0 0;-800 400;640 390;-150 680" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Samovar" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/E1O31.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+10s" dur="3s"
values="0 0;-800 400;400 200;-100 780" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
</svg>
</div>
#3. Шагающая шляпа
- Нужно сначала вырезать контуры шляпы
- дорисовать ноги шляпы в векторном редакторе
- в растровом редакторе заместить место, занимаемое шляпой фоном.

Имитацию ходьбы можно реализовать поочередным подниманием левой и правой ноги и одновременным перемещением всей фигуры.
3.1 Поднимание левой ноги,
это по сути вращение вокруг самой верхней точки ноги.
Именно для этого нужно было прорисовать весь контур ноги, чтобы найти с помощью getBBox()
координаты точки вращения, как это было сделано в пункте 1 Вращение луны
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" height="100%" width="100%"/>
<g id="LegL" stroke="#971B59" stroke-width="2">
<path fill="#FFFBFF" d="m1721 765 5-66 46 0-12 28c0 0-1 8 0 12 1 3 3 6 6 8 2 2 5 3 8 3 2 1 4 0 5 1 2 1 3 3 4 5 0 1 0 3-1 4-1 1-2 3-4 3-19 1-58 0-58 0zM1734 698l1-11" />
<path fill="#8DEBBC" d="m1734 698 1-11v-13l-1-8c0 0-1-20-3-30-1-5-4-16-4-16l33-13 5 10 5 10c0 0 3 10 5 14 1 4 3 7 4 11 0 4-1 11-1 11l-3 13-4 11-4 10z" />
<!-- Анимация левой ноги -->
<animateTransform id="LeftForward" attributeName="transform" type="rotate" begin="svg1.click" dur="0.5s"
values="0 1731 607;-28 1731 607;0 1731 607" fill="freeze" repeatCount="2" />
</g>
<g id="LegR" stroke="#971B59" stroke-width="2" transform="rotate(28 1817 587)">
<path fill="#FEFAFE" d="m1886 682 38 54c0 0 33-18 48-30 1-1 3-2 3-3 1-1 1-3 0-5-1-2-2-3-4-4-2-1-4 0-6 0-2 0-4 2-5 2-2 0-3 0-5 0-3 0-6 0-9-2-3-2-4-7-6-10-5-8-15-25-15-25zM1915 663" />
<path fill="#8DEBBC" d="m1915 663c0 0-8-14-13-21-4-5-8-11-13-16-2-2-5-4-8-6-3-3-6-5-9-8-8-6-15-15-24-19-9-3-22-9-29-2-3 3-1 9 0 14 1 5 5 10 8 15 2 3 5 7 8 10 4 4 9 6 13 9 5 4 8 8 13 12 6 5 12 9 18 15 3 3 8 9 8 9l4 7z" />
</g>
<g id="Hand" stroke="#971B59" stroke-width="2">
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
</svg>
</div>
3.2 Поднимание правой ноги
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" height="100%" width="100%"/>
<g id="LegL" stroke="#971B59" stroke-width="2">
<path fill="#FFFBFF" d="m1721 765 5-66 46 0-12 28c0 0-1 8 0 12 1 3 3 6 6 8 2 2 5 3 8 3 2 1 4 0 5 1 2 1 3 3 4 5 0 1 0 3-1 4-1 1-2 3-4 3-19 1-58 0-58 0zM1734 698l1-11" />
<path fill="#8DEBBC" d="m1734 698 1-11v-13l-1-8c0 0-1-20-3-30-1-5-4-16-4-16l33-13 5 10 5 10c0 0 3 10 5 14 1 4 3 7 4 11 0 4-1 11-1 11l-3 13-4 11-4 10z" />
</g>
<g id="LegR" stroke="#971B59" stroke-width="2" transform="rotate(28 1817 587)">
<path fill="#FEFAFE" d="m1886 682 38 54c0 0 33-18 48-30 1-1 3-2 3-3 1-1 1-3 0-5-1-2-2-3-4-4-2-1-4 0-6 0-2 0-4 2-5 2-2 0-3 0-5 0-3 0-6 0-9-2-3-2-4-7-6-10-5-8-15-25-15-25zM1915 663" />
<path fill="#8DEBBC" d="m1915 663c0 0-8-14-13-21-4-5-8-11-13-16-2-2-5-4-8-6-3-3-6-5-9-8-8-6-15-15-24-19-9-3-22-9-29-2-3 3-1 9 0 14 1 5 5 10 8 15 2 3 5 7 8 10 4 4 9 6 13 9 5 4 8 8 13 12 6 5 12 9 18 15 3 3 8 9 8 9l4 7z" />
<!-- Анимация правой ноги -->
<animateTransform id="RightBack" attributeName="transform" type="rotate" begin="svg1.click" dur="0.5s"
values="28 1817 587;0 1817 587;28 1817 587" repeatCount="2" fill="freeze" />
</g>
<g id="Hand" stroke="#971B59" stroke-width="2">
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
</svg>
</div>
3.3 Чередование поднимания ног
Реализуется с помощью логических цепочек, которые можно выразить словами:
анимация правой ноги (1 раз) -> анимация подъема левой ноги (1 раз) -> анимация правой ноги (1 раз) и так зациклить
begin="svg1.click"
-> begin="RightBack.end"
-> begin="svg1.click;LeftForward.end"
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" height="100%" width="100%"/>
<g id="LegL" stroke="#971B59" stroke-width="2">
<path fill="#FFFBFF" d="m1721 765 5-66 46 0-12 28c0 0-1 8 0 12 1 3 3 6 6 8 2 2 5 3 8 3 2 1 4 0 5 1 2 1 3 3 4 5 0 1 0 3-1 4-1 1-2 3-4 3-19 1-58 0-58 0zM1734 698l1-11" />
<path fill="#8DEBBC" d="m1734 698 1-11v-13l-1-8c0 0-1-20-3-30-1-5-4-16-4-16l33-13 5 10 5 10c0 0 3 10 5 14 1 4 3 7 4 11 0 4-1 11-1 11l-3 13-4 11-4 10z" />
<!-- Анимация левой ноги -->
<animateTransform id="LeftForward" attributeName="transform" type="rotate" begin="RightBack.end" dur="0.5s"
values="0 1731 607;-28 1731 607;0 1731 607" fill="freeze" repeatCount="1" />
</g>
<g id="LegR" stroke="#971B59" stroke-width="2" transform="rotate(28 1817 587)">
<path fill="#FEFAFE" d="m1886 682 38 54c0 0 33-18 48-30 1-1 3-2 3-3 1-1 1-3 0-5-1-2-2-3-4-4-2-1-4 0-6 0-2 0-4 2-5 2-2 0-3 0-5 0-3 0-6 0-9-2-3-2-4-7-6-10-5-8-15-25-15-25zM1915 663" />
<path fill="#8DEBBC" d="m1915 663c0 0-8-14-13-21-4-5-8-11-13-16-2-2-5-4-8-6-3-3-6-5-9-8-8-6-15-15-24-19-9-3-22-9-29-2-3 3-1 9 0 14 1 5 5 10 8 15 2 3 5 7 8 10 4 4 9 6 13 9 5 4 8 8 13 12 6 5 12 9 18 15 3 3 8 9 8 9l4 7z" />
<!-- Анимация правой ноги -->
<animateTransform id="RightBack" attributeName="transform" type="rotate" begin="svg1.click;LeftForward.end" dur="0.5s"
values="28 1817 587;0 1817 587;28 1817 587" fill="freeze" />
</g>
<g id="Hand" stroke="#971B59" stroke-width="2">
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
</svg>
</div>
3.4 Добавляем к анимации ног перемещение шляпы в пространстве
<!-- Анимация горизонтального движения шляпы -->
<animateTransform id="an_Horiz" attributeName="transform" type="translate" begin="an_hat.end+5s;an_Horiz.end+2s" dur="20s"
values="0, 0;600 0;600,-350;0,0" fill="freeze" additive="sum" repeatCount="1" />
<g>
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" height="100%" width="100%"/>
<g id="Hat+Legs" >
<g id="LegL" stroke="#971B59" stroke-width="2">
<path fill="#FFFBFF" d="m1721 765 5-66 46 0-12 28c0 0-1 8 0 12 1 3 3 6 6 8 2 2 5 3 8 3 2 1 4 0 5 1 2 1 3 3 4 5 0 1 0 3-1 4-1 1-2 3-4 3-19 1-58 0-58 0zM1734 698l1-11" />
<path fill="#8DEBBC" d="m1734 698 1-11v-13l-1-8c0 0-1-20-3-30-1-5-4-16-4-16l33-13 5 10 5 10c0 0 3 10 5 14 1 4 3 7 4 11 0 4-1 11-1 11l-3 13-4 11-4 10z" />
<!-- Анимация левой ноги -->
<animateTransform id="LeftForward" attributeName="transform" type="rotate" begin="RightBack.end" dur="0.5s"
values="0 1731 607;-28 1731 607;0 1731 607" fill="freeze" repeatCount="1" />
</g>
<g id="LegR" stroke="#971B59" stroke-width="2" transform="rotate(28 1817 587)">
<path fill="#FEFAFE" d="m1886 682 38 54c0 0 33-18 48-30 1-1 3-2 3-3 1-1 1-3 0-5-1-2-2-3-4-4-2-1-4 0-6 0-2 0-4 2-5 2-2 0-3 0-5 0-3 0-6 0-9-2-3-2-4-7-6-10-5-8-15-25-15-25zM1915 663" />
<path fill="#8DEBBC" d="m1915 663c0 0-8-14-13-21-4-5-8-11-13-16-2-2-5-4-8-6-3-3-6-5-9-8-8-6-15-15-24-19-9-3-22-9-29-2-3 3-1 9 0 14 1 5 5 10 8 15 2 3 5 7 8 10 4 4 9 6 13 9 5 4 8 8 13 12 6 5 12 9 18 15 3 3 8 9 8 9l4 7z" />
<!-- Анимация правой ноги -->
<animateTransform id="RightBack" attributeName="transform" type="rotate" begin="svg1.click;LeftForward.end" dur="0.5s"
values="28 1817 587;0 1817 587;28 1817 587" fill="freeze" />
</g>
<g id="Hand" stroke="#971B59" stroke-width="2">
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
<!-- Анимация горизонтального движения шляпы -->
<animateTransform id="an_Horiz" attributeName="transform" type="translate" begin="svg1.click+3s;an_Horiz.end+2s" dur="20s"
values="0, 0;600 0;600,-350;0,0" fill="freeze" additive="sum" repeatCount="1" />
<g>
<!-- глаза + рот большой шляпы eyes + mouth of a big hat -->
<path stroke="#725598" stroke-width="4" stroke-linecap="round" fill="none" d="m1831.7 535.5c0 0 10.1 14.4 16.8 9.9 5.9-4 4.4-17.1 4.4-17.1" />
<path stroke="#725598" stroke-width="4" d="m1824.1 509.1c1.1-0.6 2.6 0.1 3.5 0.9 1.7 1.5 2.5 3.9 2.6 6.1 0.1 1.3 0.1 3.1-1.1 3.7-1.2 0.7-3.1-0.3-4-1.3-1.6-1.6-1.9-4.2-1.9-6.4 0-1.1-0.1-2.6 0.9-3.1zM1824.7 510.4" />
<path stroke="#725598" stroke-width="4" d="m1824.7 510.4c0.5-0.3 1.2 0.3 1.7 0.7 0.6 0.4 0.9 1.1 1.2 1.7 0.4 0.8 0.7 1.6 1 2.5 0.1 0.5 0.3 1 0.2 1.5-0.1 0.7 0 1.7-0.6 2-0.7 0.3-1.5-0.4-2-0.9-0.6-0.6-0.8-1.4-1.1-2.2-0.4-1.1-0.6-2.3-0.7-3.5 0-0.6-0.3-1.5 0.2-1.8z" />
<g transform="translate(18.821694,-6.6252361)">
<path stroke="#725598" stroke-width="4" d="m1824.1 509.1c1.1-0.6 2.6 0.1 3.5 0.9 1.7 1.5 2.5 3.9 2.6 6.1 0.1 1.3 0.1 3.1-1.1 3.7-1.2 0.7-3.1-0.3-4-1.3-1.6-1.6-1.9-4.2-1.9-6.4 0-1.1-0.1-2.6 0.9-3.1zM1824.7 510.4" />
<path stroke="#725598" stroke-width="4" d="m1824.7 510.4c0.5-0.3 1.2 0.3 1.7 0.7 0.6 0.4 0.9 1.1 1.2 1.7 0.4 0.8 0.7 1.6 1 2.5 0.1 0.5 0.3 1 0.2 1.5-0.1 0.7 0 1.7-0.6 2-0.7 0.3-1.5-0.4-2-0.9-0.6-0.6-0.8-1.4-1.1-2.2-0.4-1.1-0.6-2.3-0.7-3.5 0-0.6-0.3-1.5 0.2-1.8z" />
<!-- Анимация глаз + рта вверх-вниз -->
</g>
<animateTransform attributeName="transform" type="translate" begin="svg1.click+3s" dur="1s"
values="0 0;0 -20;-5 -20;0 0" fill="freeze" additive="sum" repeatCount="indefinite" />
</g>
</g>
</svg>
</div>