javascript - WINTER BASH 2020 季节形象的动画

Question

2020 年冬季狂欢节 赛季即将结束，我认为找出 CSS 和其他标记来生成此处显示的出色 Logo 会很有启发性:

在下图中，数字表示动画所需的对象

动画脚本:

帽子生成器。
上下移动不均匀

问号应该漂浮在空间中，同时大小发生变化。
公开获取“ secret 帽子”的条件信息的收集，象征着什么。

气球应均匀摆动。

小蓝帽应该沿着 WINTER 这个词的路径移动

月亮晃动。应该在完成场景的第 4 点后开始

大蓝帽子向前移动寻找新帽子。
在第 6 步开始后的一段时间，帽子应该开始从上面掉下来。

星星的动画，应该在找到所有的帽子后开始。

我设法实现了场景的第一点。
点击 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="/image/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>

在实现月球摆动动画时，我无法获得所需的月球摆动轨迹。

.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="/image/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>

希望这个问题能给所有读者留下2020年假期的温馨记忆。另外，我希望这个问题和答案将来对其他人有所帮助。

Answer 1

LIVE DEMO
代码变得非常大，为了将它放在一个限制为 30,000 个字符的片段中，我不得不对其进行大量优化并去掉一些装饰。
对节目的要点进行了评论，希望能帮助大家理解，如有需要，我会再做补充解答，动画元素的详细解释。
单击“开始”按钮后动画将开始
音乐轨道响起: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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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>