Animation of the image of the WINTER BASH 2020 season

Question

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:

enter image description here

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

enter image description here

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.

Alexandr_TT · Accepted Answer

Explanation of how animation elements work

#1. Moon wiggle

enter image description here

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

enter image description here

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.

enter image description here

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>

Animation of the image of the WINTER BASH 2020 season

Tags:

javascript

html

css

animation

svg

Alexandr_TT

1 Answers

Explanation of how animation elements work

Alexandr_TT

Recent Activity

Donate For Us

Animation of the image of the WINTER BASH 2020 season

Tags:

javascript

html

css

animation

svg

Alexandr_TT

1 Answers

Explanation of how animation elements work

Alexandr_TT

Related questions

Recent Activity

Donate For Us