Animation of the image of the WINTER BASH 2020 season

Created Jan 4, 2021 Edited Jan 4, 2021

Viewed 193

WINTER BASH 2020 season is coming to an end, and I thought it would be instructive to figure out the CSS and other markup for generating the excellent logo shown here:

In the image below, the numbers indicate the desired objects for animation

Animation script:

Hat generator. Should move unevenly up and down
The question mark should float in space with a simultaneous change in size. What does the collection of information about the disclosure of the conditions for obtaining "secret hats" symbolize.
The balloon should wiggle evenly.
The small blue hat should move along the path of the word WINTER
Moon wiggle. Should start after completing point 4 of the scenario
The big blue hat moves forward in search of new hats. Some time after the start of step 6, hats should begin to fall from above.
Animation of stars, should start after finding all the hats.

I managed to implement the first point of the scenario.

Hat animation starts after clicking on the canvas

.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/Qe1A9.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> 
  
  <path id="cloud" stroke="#971B59" stroke-width="2" fill="#FFFCFF" d="m843.3 766.3c-14.1-0.4-27.4-11.9-34.9-23.8-7-11.2-10.2-26.7-6-39.2 3.7-10.8 24.7-23.8 24.7-23.8 0 0 15.3-5.2 23-4.3 9.9 1.2 17.8 5.5 27.3 12.1 5.2 3.6 15.5 1.3 17-2.7 4.6-12.1 6.8-23 12.7-33.4 5.7-10 12.2-20.5 21.7-27.1 10.1-7 23-8.8 34.9-11.4 7.1-1.5 14.4-2.6 21.7-2.4 8.1 0.3 16.4 1.4 24 4.2 7 2.6 11.9 9.8 19.2 11.3 5.5 1.1 16.6-2.2 16.6-2.2 0 0 6-19.3 11.3-27.7 9.9-15.6 21.8-30.9 37.3-41 15.6-10.1 34.4-16.2 53-17.5 14.7-1 29.7 2.5 43.4 7.8 15.7 6.1 30.9 15.1 42.8 27.1 6.2 6.2 9 14.1 13.9 22.3 1.9 3.2 6.9-0.6 10.2 0 3.9 0.7 7.5 5.8 11.1 4.2 9.9-4.4 17.8-9.1 27.4-11.4 8.4-2.1 17.2-3 25.9-2.4 11.5 0.8 23.2 3.2 33.7 7.8 10.9 4.9 21.4 11.6 29.5 20.5 9.3 10.2 16.1 23 20.5 36.1 2.4 7.1 2.4 14.9 2.8 22.4 0.4 6.5-2.5 13.6 0 19.6 0.9 2.2 3.3 3.6 5.1 5.1 2.7 2.2 5.8 8.1 8.5 6 6.4-5.2 13.6-8.3 21.3-9.4 7.7-1 16.7-1.2 23 3.4 9.9 7.3 15.6 20.9 16.2 33.2 0.4 8.8-3.4 18.2-9.4 24.7-4.9 5.3-19.6 9.4-19.6 9.4 0 0-408 8.1-609.9 2.6z" />
            <!-- Hat animation on blue rectangles --> 
  <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" /> 
</svg>
</div>

When implementing the moon wobble animation, I was unable to achieve the desired moon wobble trajectory.

.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/Qe1A9.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> 
  
  <path id="cloud" stroke="#971B59" stroke-width="2" fill="#FFFCFF" d="m843.3 766.3c-14.1-0.4-27.4-11.9-34.9-23.8-7-11.2-10.2-26.7-6-39.2 3.7-10.8 24.7-23.8 24.7-23.8 0 0 15.3-5.2 23-4.3 9.9 1.2 17.8 5.5 27.3 12.1 5.2 3.6 15.5 1.3 17-2.7 4.6-12.1 6.8-23 12.7-33.4 5.7-10 12.2-20.5 21.7-27.1 10.1-7 23-8.8 34.9-11.4 7.1-1.5 14.4-2.6 21.7-2.4 8.1 0.3 16.4 1.4 24 4.2 7 2.6 11.9 9.8 19.2 11.3 5.5 1.1 16.6-2.2 16.6-2.2 0 0 6-19.3 11.3-27.7 9.9-15.6 21.8-30.9 37.3-41 15.6-10.1 34.4-16.2 53-17.5 14.7-1 29.7 2.5 43.4 7.8 15.7 6.1 30.9 15.1 42.8 27.1 6.2 6.2 9 14.1 13.9 22.3 1.9 3.2 6.9-0.6 10.2 0 3.9 0.7 7.5 5.8 11.1 4.2 9.9-4.4 17.8-9.1 27.4-11.4 8.4-2.1 17.2-3 25.9-2.4 11.5 0.8 23.2 3.2 33.7 7.8 10.9 4.9 21.4 11.6 29.5 20.5 9.3 10.2 16.1 23 20.5 36.1 2.4 7.1 2.4 14.9 2.8 22.4 0.4 6.5-2.5 13.6 0 19.6 0.9 2.2 3.3 3.6 5.1 5.1 2.7 2.2 5.8 8.1 8.5 6 6.4-5.2 13.6-8.3 21.3-9.4 7.7-1 16.7-1.2 23 3.4 9.9 7.3 15.6 20.9 16.2 33.2 0.4 8.8-3.4 18.2-9.4 24.7-4.9 5.3-19.6 9.4-19.6 9.4 0 0-408 8.1-609.9 2.6z" />
            <!-- Hat animation on blue rectangles --> 
  <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" />  
    <!-- Moon -->
 <g id="moon" stroke="#971B59" stroke-width="2"  transform="rotate(30,1750,10.4)">
  <path 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" /> 
         <!-- Moon animation  an_hat.end-->
    <animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="svg1.click" dur="6s" values="30,1450,10.4;
                10,1450,10.4;
                20,1450,10.4; 
                -30,1450,10.4;
                0,1450,10.4;
                30,1450,10.4"
                keyTimes="0;0.15;0.25;0.45;0.85;1"
                repeatCount="indefinite" 
                    />   
                    
  </g>  
</svg>
</div>

I hope that this question will leave all readers with warm memories of the 2020 holiday season. Also, I hope that this question and answer will be helpful to others in the future.

animation svg css html javascript

2 Answers

LIVE DEMO

The code turned out to be quite large, to place it in a snippet with a limit of 30,000 characters, I had to optimize it quite a lot and get rid of some embellishments.
Comments remained on the main points of the program, I hope they will help you understand, if there is a need, I will make an additional answer with detailed explanations of the animation elements. The animation will start after clicking the Start button

The music track sounds: Candy Dulfer / Dave Stewart - Lily Was Here

.container {
width:100vw;
height:100vh;
}
.s0{
    fill:none;
    stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}
#Stroke_bottom {
fill:#8DEBB5;
stroke:#971B59;
stroke-width:4;
stroke-dashoffset:350;
stroke-dasharray:350;
fill-opacity:0;
filter:url(#dropShadow);
}

#q {
fill:#8DEBB5;
stroke:#971B59;
stroke-width:4;
stroke-dashoffset:1366;
stroke-dasharray:1366;
fill-opacity:0;
filter:url(#dropShadow);
}
#cloud {
fill:#FFFCFF;
stroke:#971B59;
stroke-width:6;
stroke-dashoffset:1649;
stroke-dasharray:1649;
filter:url(#dropShadow);
}

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
  viewBox="0 0 2787 768">

<defs>
         <!-- Trail running along the word "Winter" of the little blue hat -->
 <path id="trace" stroke="none" d="m1115 163 46 98 25-52 26 53 46-97 25 1v97h33l1-97 81 99v-99l57 1 1 98 3-1-1-98h37 22v98l61 1 1-3-58-2v-46l55 1v-5h-54v-41l79-4v99h4l-1-40 27-1 22 41 4-1-21-40c0 0 10-4 14-8 4-3 7-7 9-12 2-6 3-13 1-19-2-6-6-10-11-14-4-3-9-4-14-5-10-2-31-1-31-1" />
 <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>  
    
    <filter id="shadow" x="-10%" y="-10%" width="200%" height="200%">
        <feOffset result="offsetResult" in="SourceAlpha" dx="2" dy="2" />
        <feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="4" />
        <feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
    </filter>  
    <mask id="msk" >
        <!-- Stars in the background     --> 
        <rect width="100%" height="100%" fill="white" />    
        <path d="m280 446c0 0-1 7-3 11-1 3-3 6-6 8-3 2-6 3-9 4-2 1-6 3-6 3 0 0 4 1 6 2 3 1 5 1 8 3 2 2 4 4 6 6 1 2 2 5 3 7 1 2 2 7 2 7 0 0 1-5 2-8 1-3 2-6 4-8 2-2 5-4 7-5 4-2 14-4 14-4 0 0-5-1-8-2-3-1-5-2-8-4-3-2-5-5-6-8-2-4-2-5-4-12zM166 315" />
  
  <path d="m166 315c0 0-1 5-3 8-1 2-2 5-4 6-3 2-10 4-10 4 0 0 5 1 8 3 2 1 4 2 5 4 1 2 3 3 3 5 1 2 1 5 1 5 0 0 1-5 2-7 1-2 2-3 3-4 1-1 3-2 5-3 2-1 7-2 7-2 0 0-3-1-5-2-2-1-4-1-6-3-2-2-3-4-4-6-1-2-3-7-3-7z" />
  
  <path d="m1715 288c-2 5-3 9-5 12-2 4-5 7-8 10-3 2-7 3-11 4-3 1-8 2-8 2 0 0 6 1 9 2 4 1 8 2 11 5 3 2 6 6 8 9 3 5 5 15 5 15 0 0 2-11 5-15 2-3 5-6 8-8 3-2 7-3 11-5 2-1 7-2 7-2 0 0-5-2-8-3-3-1-6-1-9-3-3-2-6-5-8-8-3-4-3-9-6-14z" />
  <path d="m1557 61c0 0-1 4-2 6-1 2-2 3-3 4-2 2-4 2-6 3-1 1-4 1-4 1 0 0 4 2 6 3 2 1 3 2 5 4 1 2 2 3 3 5 1 1 2 4 2 4 0 0 1-4 2-5 1-2 2-3 4-5 2-1 4-2 5-3 1-1 4-2 4-2 0 0-3-1-5-2-2-1-4-2-5-4-1-1-2-3-3-5-1-1-2-4-2-4z" />
  <path d="m2380 375c0 0-2 7-3 10-1 4-3 7-5 10-2 3-6 4-9 6-3 2-10 3-10 3 0 0 6 2 9 3 4 2 8 3 11 6 3 3 4 8 6 12 1 3 2 8 2 8 0 0 2-6 3-9 1-3 3-7 5-10 2-3 5-5 9-6 4-2 12-4 12-4 0 0-6-2-8-3-2-1-5-2-7-3-2-1-4-3-6-6-2-2-2-5-3-7-1-3-4-10-4-10z" />
  <path d="m2473 233c0 0-1 4-3 6-1 2-2 3-4 5-2 2-3 3-5 4-1 1-4 1-4 1 0 0 4 2 6 3 2 1 4 2 5 4 1 2 2 4 3 6 1 2 2 5 2 5 0 0 1-4 2-6 1-2 2-4 3-5 1-1 3-2 4-3 2-1 7-3 7-3 0 0-5-2-8-3-2-1-3-2-4-4-1-1-1-3-2-5 0-1-1-3-1-3z" />
  <path d="m2269 59c0 0-2 1-3 2-2 1-3 3-5 4-2 1-5 1-7 1-2 0-6 0-6 0 0 0 3 3 5 5 1 2 2 3 2 5 1 3 0 5 0 8 0 1 0 3 0 3 0 0 4-3 6-5 1-1 3-2 4-2 2 0 4 0 6 0 2 0 6 1 6 1 0 0-3-3-4-4-1-2-3-3-4-6-1-2 0-4 0-6 0-2 1-5 1-5z" />
  <path d="m1477 596c0 0-1 3-2 5-1 2-2 4-3 5-2 2-5 3-8 5-1 1-4 1-4 1 0 0 4 1 5 1 2 1 4 2 6 3 2 2 3 4 4 7 1 2 2 5 2 5 0 0 1-4 2-6 1-2 2-3 4-5 1-1 3-2 5-3 2-1 5-2 5-2 0 0-3-2-5-3-2-1-3-2-5-3-2-2-3-4-4-6-1-1-2-4-2-4z" />
   <path  d="m830 136c0 0-1 8-2 11-1 2-2 4-4 5-1 1-3 2-4 3-2 1-6 2-6 2 0 0 4 2 6 3 2 1 4 2 5 4 1 1 2 3 3 5 1 2 2 6 2 6 0 0 1-5 2-7 1-1 2-3 3-4 2-1 4-2 5-3 2-1 6-3 6-3 0 0-4-1-6-2-2-1-3-2-4-3-1-1-2-3-3-4-1-3-2-11-2-11" />    
        </mask>
     <radialGradient id="grad_bl" cx="20%" cy="20%" r="30%" fx="30%" fy="30%">
   <stop stop-color="white" offset="20%"/>
   <stop stop-color="#31BCE5" offset="90%"/>
 </radialGradient>   
</defs>   
    <!-- Bottom background -->
<rect width="100%" height="100%" fill="yellow" >
      <!-- Animation of stars twinkling through the mask -->
  <animate id="back" attributeName="fill" begin="btn1.click+80s;back.end+5s" dur="1s" values="red;yellow;cyan" fill="freeze"    repeatcount="10" />
  </rect>
  
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" mask="url(#msk)" height="100%" width="100%"/>    
                     
   <!-- Moon -->
 <g id="moon" stroke="#971B59" stroke-width="2" filter="url(#shadow)" transform="rotate(30,1750,10.4)">
  <path 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" /> 
         <!-- Moon animation  an_hat.end-->
    <animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="an_hat.end" dur="6s" values="30,1750,10.4;
                10,1750,10.4;
                20,1750,10.4; 
                -30,1750,10.4;
                0,1750,10.4;
                30,1750,10.4"
                keyTimes="0;0.15;0.25;0.45;0.85;1"
                repeatCount="indefinite" 
                    />   
                    
  </g>  
    <!-- Hat on the far right with a spring  -->
 <g  stroke="#971B59" stroke-width="2" filter="url(#shadow)" >
 <path fill="#971B59" d="m2648 190c0 0 35 19 52 30 22 14 63 45 63 45l-37 61-22 36-49-35-34-20-34-19zM2588 287l68 40 49 36-13 20-115-74" />
  <path fill="#FFFBFF" d="m2588 287 68 40 49 36-13 20-115-74z" />
  <path fill="#31BCE5" d="m2537 290c1-1 3-1 4 0 8 4 15 7 22 11 9 5 18 11 27 16 15 9 29 18 44 27 20 13 39 26 58 39 5 4 11 7 16 11 5 3 9 6 14 10 1 1 4 2 4 4 0 3-1 7-4 7-2 1-3-1-4-2-5-3-10-8-15-12-12-9-25-17-37-26-15-10-46-27-46-29 0-1-27-18-41-27-9-5-18-10-27-16-4-2-8-4-11-6-2-1-4-2-4-5 0-2 2-3 3-4z"/>
  <path fill="#911A5B" d="m2533 294-2 4 12 11 18 13 26 18 20 14 21 13 19 12 27 17 17 9 10 6 10 5 8-1-9-6-10-8-15-11-13-9-32-21-27-15-33-22-9-5-15-8-14-8z" /> 
      <!-- Hat animation on the far right -->
    <animateTransform id="Hat_right" attributeName="transform" type="translate" begin="btn1.click;Hat_right.end+2s" dur="1.0s" values="0,0;-60,180;0,0" repeatCount="2" keyTimes="0;0.7;1" />  
  </g>
          <!-- Question mark -->
  <path id="q"  d="m560 343c-5-16-3-35 2-51 4-16 14-30 24-42 10-12 23-22 37-30 14-8 30-13 45-16 17-3 35-4 53-2 19 2 38 5 55 12 18 8 35 18 48 33 15 17 27 37 32 58 6 27 4 55-4 81-6 18-18 33-30 48-10 12-25 21-36 32-11 11-25 21-33 35-4 7-6 16-8 24-2 9 0 20-5 28-5 9-13 17-23 21-10 4-22 4-32 1-9-3-17-9-23-17-5-8-7-18-8-28-1-14 0-29 4-43 3-11 8-21 14-30 6-9 14-16 21-23 10-10 22-19 32-28 10-9 23-17 30-29 5-7 8-15 9-23 2-10 2-20-2-29-3-9-9-19-17-25-9-7-21-10-32-11-11-1-22 1-32 5-8 4-17 9-22 16-5 6-5 15-7 22-2 7-4 15-8 22-4 6-8 13-15 16-8 4-19 4-28 4-8-1-17-2-24-7-7-5-12-12-14-20z" >
     <animate id="q_Stroke" attributeName="stroke-dashoffset" begin="btn1.click;q_scale.end+4s" dur="4s" values="1366;0" fill="freeze" /> 
       <animate id="q_Fill" attributeName="fill-opacity" begin="q_Stroke.end" dur="4s" values="0;0.5;1" fill="freeze" /> 
        <animateTransform id="q_move" attributeName="transform" type="translate" begin="q_Fill.end" dur="8s" values="0 0;0 -100;-200 -100;0 0" repeatCount="1" additive="sum"  />  
           <animateTransform id="q_scale" attributeName="transform" type="scale" begin="q_Fill.end" dur="8s" values="1,;0.75;0.75;1;1" repeatCount="1" additive="sum"  />   
  </path>
                  <!-- Question mark tail -->
  <path fill="#8DEBB5" stroke="#971B59" stroke-width="2" d="m696 575c-3 1-5 3-7 5-1 1-2 2-2 3 0 1 1 3 2 4 1 1 3 0 4 0 1 0 1 0 2 0 1 1 1 2 1 3 1 1 2 1 3 0 1 0 1-1 2-2 0 0 0-1 1-1 1 0 2 2 3 2 1 0 3-1 4-2 1-1 0-3 0-4-1-2-2-3-4-4-1-1-2-2-3-2-1-1-3-1-4-1z" />
                   <!-- Bottom question ball -->
<path id="Stroke_bottom"   d="m691 709c0 2-3 3-4 4-1 1-2 2-3 4-1 1-1 2-1 4 0 1 1 3 2 4 1 1 3-2 4-1 1 0 1 2 2 3 1 0 2 0 3 0 1-1 1-2 2-3 1 0 3 2 4 1 1 0 2-2 2-3 0-2-2-3-3-5-1-1-2-2-3-3-1-1-3-1-3-2 0-4 6-6 9-9 3-3 6-6 9-9 4-5 9-9 13-14 3-4 6-8 8-13 2-5 4-11 3-16 0-6-2-11-4-17-2-5-4-9-8-13-4-4-9-7-14-10-4-2-9-3-14-4-3 0-7 0-10 0-5 1-10 2-14 3-4 2-9 5-12 8-5 5-9 10-11 17-2 7-3 14-2 21 1 5 3 9 5 13 2 4 5 8 8 12 3 4 6 7 9 11 3 4 7 7 10 10 2 2 4 3 6 5 2 2 5 2 5 5z" >
     <animate id="an_Stroke_bottom" attributeName="stroke-dashoffset" begin="btn1.click+1s;q_scale.end+4s" dur="4s" values="350;0" fill="freeze" /> 
       <animate id="q_Fill" attributeName="fill-opacity" begin="q_Stroke.end" dur="4s" values="0;0.5;1" fill="freeze" />       

       <animateTransform id="Stroke_bottom_move" attributeName="transform" type="translate" begin="q_Fill.end" dur="8s" values="0 0;0 -100;-200 -100;0 0" repeatCount="1" additive="sum"  />  
           <animateTransform id="Stroke_bottom_scale" attributeName="transform" type="scale" begin="q_Fill.end" dur="8s" values="1,;0.75;0.75;1;1" repeatCount="1" additive="sum"  />   
    </path> 

              <!-- Blue balloon  -->
 <g id="AirBall" transform="rotate(-15 536 395.8)">
 <path fill="url(#grad_bl)" stroke="#2A9EC1" stroke-width="4" filter="url(#dropShadow)" d="m360 167c11-8 24-13 37-13 13 0 27 4 38 11 13 8 24 20 30 34 8 16 7 34 9 52 1 13 2 27 1 40 0 6 2 13-2 16-3 3-8 1-13 1-8 0-17-1-25-3-11-2-22-4-33-8-11-3-23-6-32-12-9-5-17-13-23-21-6-9-12-20-13-31-2-12-1-25 4-36 5-11 13-22 24-29z" />
                <!-- Ball tail -->
 <path fill="#FFFBFF" stroke="#971B59" stroke-width="4" d="m474 305c2-1 4 0 6 0 2 0 5 0 7 2 1 1 1 3 1 4 0 1 0 3-1 3-1 1-4-1-4 1-1 1 1 3 0 4 0 1-1 3-2 3-2 1-3-3-5-2-1 1 0 3-1 4-1 1-2 2-3 2-2 0-4-2-4-4-1-2 0-5 0-8 0-1 0-3 1-4 1-2 4-3 6-4z" /> 
  
             <!-- Ball rope -->
  <path fill="none" stroke="#971B59" stroke-width="4"  d="m 536.08463,395.61831 c 0,0 -12.58625,-24.39313 -19.91851,-35.97377 -4.23232,-6.68457 -8.89916,-13.10432 -13.85276,-19.27342 -3.20473,-3.9911 -6.65792,-7.7864 -10.239,-11.44359 -2.88203,-2.94329 -9.03442,-8.43212 -9.03442,-8.43212" />
             <!-- Balloon animation -->
     <animateTransform id="an_AirBall" attributeName="transform" type="rotate" begin="an_hat.end;an_AirBall.end+12s" dur="5s"  
        values="-15 536 395.8;40 536 395.8;60 536 395.8;-15 536 395.8" fill="freeze"  repeatCount="5" />  
  </g>
  <g id="hat" transform="translate(-1320,-180)" filter="url(#shadow)" >
  <path d="m1299 184 47-17 3 6-47 17zM1309 181l-10-29 29-10 10 29M1309 181l-10-29 29-10 10 29" />
  <path d="m1309 181-10-29 29-10 10 29z" />
   </g>
    <!-- Hat animation along "the winter" path   -->
  <animateMotion id="an_hat" xlink:href="#hat" begin="an_BigHat.end+0.5s" dur="5s" fill="freeze" repeatCount="1" >
    <mpath xlink:href="#trace" />
  </animateMotion>
   
    <!--  Hat on blue rectangles   --> 
 <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="M939 194 928 194c0 0-13 0-19 4-4 2-7 6-9 10-2 4-1 9-1 14 0 5 1 10 3 14 2 5 5 9 8 12 4 5 8 10 14 13 6 4 14 7 21 9 7 2 14 4 21 5 6 1 12 1 18 2 6 1 12 1 18 2 5 0 10 0 15-1 6 0 11-1 17-2 7-1 13-3 20-4 8-2 17-4 24-9 6-4 12-8 17-14 5-5 8-11 11-18 2-5 4-11 3-17-1-6-5-11-10-15-4-2-13-3-13-3l-13-1z" />
  <path id="brimHat2" fill="#971B59" d="m924 194c0 0-5 7-7 11-1 3-1 7 0 10 1 4 2 9 5 12 2 4 5 7 8 10 4 4 8 8 13 10 6 4 13 6 20 8 7 2 14 3 21 4 5 1 10 1 15 1 6 0 12 0 17-1 7 0 13-1 20-2 6-1 13-2 19-5 7-3 13-6 18-11 6-5 12-12 15-19 2-6 3-12 1-18-1-4-7-9-7-9z" /> 
  <path id="topHat" fill="#FCB660" d="m939 218c0 0-1-25-2-37-1-22-2-43-4-65 0-4-2-10 6-10 40 0 84-2 126 1 4 0 11 0 12 3 1 3 0 8 0 8l-4 54-3 47z" /> 
  <path id="bottomHat" fill="#FEFBFE"  d="m939 221 129 0 0 17c0 0-39 6-58 6-23 0-68-5-68-5z" />
          <!-- Hat animation on blue rectangles   -->
  
  <animateTransform id="an_BigHat"  attributeName="transform" type="translate" begin="btn1.click" dur="5s" values="0,0;0,250;0,0;0,250;0,0;0,400;0,100;0,500;0,0" repeatCount="1" />
  </g> 
  
  <path id="cloud" transform="translate(0 -4)" d="m843 766c-14 0-27-12-35-24-7-11-10-27-6-39 4-11 25-24 25-24 0 0 15-5 23-4 10 1 18 6 27 12 5 4 16 1 17-3 5-12 7-23 13-33 6-10 12-20 22-27 10-7 23-9 35-11 7-1 14-3 22-2 8 0 16 1 24 4 7 3 12 10 19 11 6 1 17-2 17-2 0 0 6-19 11-28 10-16 22-31 37-41 16-10 34-16 53-17 15-1 30 3 43 8 16 6 31 15 43 27 6 6 9 14 14 22 2 3 7-1 10 0 4 1 8 6 11 4 10-4 18-9 27-11 8-2 17-3 26-2 12 1 23 3 34 8 11 5 21 12 30 21 9 10 16 23 21 36 2 7 2 15 3 22 0 7-2 14 0 20 1 2 3 4 5 5 3 2 6 8 9 6 6-5 14-8 21-9 8-1 17-1 23 3 10 7 16 21 16 33 0 9-3 18-9 25-5 5-20 9-20 9 0 0-408 8-610 3z" >
      <animate id="an_cloud" attributeName="stroke-dashoffset" begin="btn1.click+85s;an_cloud.end+5s" dur="8s" values="1649;0;0;1649" fill="freeze" /> 
  </path>
      

<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" />
     <!-- Big Hat Left Leg Animation-->
   <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" /> 
     
  </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" />
     <!-- Big Hat Right Leg Animation -->
   <animateTransform id="RightBack" attributeName="transform" type="rotate" begin="an_hat.end;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>   
       <!-- Animation of the horizontal movement of a large hat -->
       <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>
     <!--  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" />
   <!--  Animation of eyes + mouth up and down -->
   </g>  
       <animateTransform attributeName="transform" type="translate" begin="an_hat.end+5s" dur="1s"  
        values="0 0;0 -20;-5 -20;0 0" fill="freeze" additive="sum"  repeatCount="indefinite" />  
    </g>
    </g>   
    
         
    <!-- Flying hats --> 
     <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="34s;an_Gimme.end+50s" 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="24s;Carnaval.end+5s" 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="40s" dur="3s"  
        values="0 0;50 780" 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="50s" dur="3s"  
        values="0 0;-800 400;400 200;-100 780" fill="freeze" additive="sum"  repeatCount="1" />  
     </image> 
</g>  
    <g>
      <image filter="url(#dropShadow)" id="Balalaika" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/JC5za.png"  width="200px" height="200px"> 
       <animateTransform attributeName="transform" type="translate" begin="53s" dur="3s"  
        values="0 0;-800 400;400 200;-800 680" fill="freeze" additive="sum"  repeatCount="1" />  
     </image> 
    </g>        
<g>
      <image filter="url(#dropShadow)" id="Milliner" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/ztauc.png"  width="200px" height="200px"> 
       <animateTransform attributeName="transform" type="translate" begin="56s" dur="3s"  
        values="0 0;-800 400;640 390" 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="60s" 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="SocialDistancing" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/d4XGr.png"  width="150px" height="150px"> 
       <animateTransform attributeName="transform" type="translate" begin="64s" dur="3s"  
        values="0 0;-800 400;400 200;-271 285" fill="freeze" additive="sum"  repeatCount="1" />  
     </image> 
</g> 
    <g>
      <image filter="url(#dropShadow)" id="Matryoshka" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/4mtVe.png"  width="200px" height="200px"> 
       <animateTransform attributeName="transform" type="translate" begin="67s" dur="3s"  
        values="0 0;-800 400;640 390;-450 570" fill="freeze" additive="sum"  repeatCount="1" />  
     </image> 
    </g>
<g>
      <image filter="url(#dropShadow)" id="WarmWelcome" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/LE0tq.png"  width="150px" height="150px"> 
       <animateTransform attributeName="transform" type="translate" begin="70s" dur="3s"  
        values="0 0;-800 400;400 200;-1085 700" fill="freeze" additive="sum"  repeatCount="1" />  
     </image> 
</g> 
    <g>
      <image filter="url(#dropShadow)" id="Vexillologist" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/vVOzH.png"  width="200px" height="200px"> 
       <animateTransform attributeName="transform" type="translate" begin="73s" dur="3s"  
        values="0 0;-800 400;640 390;-150 470" fill="freeze" additive="sum"  repeatCount="1" /> 
            
     </image> 
    </g> 
<g>
      <image filter="url(#dropShadow)" id="World" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/j2xFc.png"  width="150px" height="150px"> 
       <animateTransform attributeName="transform" type="translate" begin="76s" dur="3s"  
        values="0 0;-800 400;400 200;315 760" fill="freeze" additive="sum"  repeatCount="1" />  
     </image> 
</g> 
    <g>
      <image filter="url(#dropShadow)" id="Movin" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/G51nw.png"  width="200px" height="200px"> 
       <animateTransform attributeName="transform" type="translate" begin="78s" dur="3s"  
        values="0 0;-800 400;640 390;420 777" fill="freeze" additive="sum"  repeatCount="1" />  
     </image> 
    </g>
<g>
      <image filter="url(#dropShadow)" id="Bouncer" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/FhnHn.png"  width="150px" height="150px"> 
       <animateTransform attributeName="transform" type="translate" begin="80s" dur="3s"  
        values="0 0;-800 400;400 200;-580 850" fill="freeze" additive="sum"  repeatCount="1" />  
     </image> 
</g>  
  <g id="btn1" fill-opacity="1" transform="translate(-700,-200)" filter="url(#dropShadow)" onclick='play()' >
     <circle  cx="880" cy="255" r="16" fill="#30BBE4"  /> 
     <text id="txt1" x="750" y="270" font-size="3rem" fill="white" >Start</text>
    <animate  attributeName="fill-opacity" begin="btn1.click" dur="1s" values="1;0" fill="freeze"    repeatcount="1" /> 
 </g>   
</svg>
<script>

var zodiac = new Audio();
zodiac.src = src="https://svg-art.ru/files/Kendi Dalfer–Meeting.mp3";

function play() {
  zodiac.play();
}
</script>

edited Jan 4, 2021

user_73948710

answered Jan 4, 2021

Explanation of how animation elements work

#1. Moon wiggle

For a uniform wobble of the moon, you need to find the exact coordinates of the top corner of the green hat in order to substitute them in the rotation animation command.

let bb = moon.getBBox();
console.log( bb.x + bb.width / 2 ); // coordinate X = 1753 
console.log(bb.y); // coordinate Y = 10

Add coordinate values to the moon rotation animation command

<animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="svg1.click" dur="6s" values="30,1753,10.4;
                    10,1753,10;
                    20,1753,10; 
                    -30,1753,10;
                    0,1753,10;
                    30,1753,10"
                    keyTimes="0;0.15;0.25;0.45;0.85;1"
                    repeatCount="indefinite" 
                  />

The attribute keyTimes ="0;0.15;0.25;0.45;0.85;1" sets the uneven rotation speed of the moon.

.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. Flying hats

The hats (bitmaps) are initially hidden behind the top edge of the canvas. When a certain time or other conditions come, the command for transforming the hats' movement is turned on.

 <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"> 
     <!-- Hat animation GimmeSpace -->
    <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. Walking hat

You must first cut out the outline of the hat
draw the legs of the hat in the vector editor
in the bitmap editor, replace the place occupied by the hat with the background.

The imitation of walking can be realized by alternately raising the left and right legs and simultaneously moving the entire figure.

3.1 Raising the left leg

it is essentially a rotation around the highest point of the leg. For this, it was necessary to draw the entire contour of the leg in order to find the coordinates of the pivot point using getBBox (), as was done in step 1 Rotation of the moon

<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" />
     <!-- Left leg animation -->
   <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 Raising your right leg

<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" />
     <!-- Right leg animation -->
   <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 Alternating leg raises

It is implemented using logical chains, which can be expressed in words: animation of the right leg (1 time) -> animation of lifting the left leg (1 time) -> animation of the right leg (1 time) and so to loop

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" />
     <!-- Left leg animation -->
   <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" />
     <!-- Right leg animation -->
   <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 Adding the movement of the hat in space to the animation of the legs

 <!-- Animating the horizontal movement of the hat -->
       <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" />
     <!-- Left leg animation -->
   <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" />
     <!-- Right leg animation -->
   <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>   
        <!-- Animating the horizontal movement of the hat -->
       <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" />
   <!--  Animate eyes + mouth up and down -->
   </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>

edited Jan 6, 2021

user_73948710

answered Jan 6, 2021