Animation of the image of the WINTER BASH 2020 season

.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="870" 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>