WINTER BASH 2020 季节形象的动画
Posted
技术标签:
【中文标题】WINTER BASH 2020 季节形象的动画【英文标题】：Animation of the image of the WINTER BASH 2020 season 【发布时间】：2021-04-10 02:16:19 【问题描述】：WINTER BASH 2020 季即将结束，我认为找出 CSS 和其他标记来生成此处显示的出色徽标会很有启发性：
在下图中，数字表示动画所需的对象
动画脚本：
帽子生成器。 上下移动应该不均匀
问号应该漂浮在空间中，同时大小发生变化。 公开获取“秘密帽子”的条件信息的收集，象征着什么。
气球应该均匀摆动。
小蓝帽应该沿着WINTER这个词的路径移动
月亮摆动。应该在完成场景的第 4 点后开始
蓝色大帽子向前移动以寻找新帽子。 在第 6 步开始后的一段时间，帽子应该开始从上面掉下来。
星星动画，应该在找到所有帽子后开始。
我设法实现了场景的第一点。
点击画布后帽子动画开始
.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" />
<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- >
<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- 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="https://i.stack.imgur.com/Qe1A9.jpg" />
<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- >
<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- 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- 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年假期的温暖回忆。另外，我希望这个问答对以后的其他人有所帮助。
【问题讨论】：
我改写了我觉得更合适的措辞。使 CSS 和 html 代码 sn-ps 折叠的好选择。 @TimBiegeleisen 感谢您编辑问题。真的更好听 【参考方案1】：LIVE DEMO
代码变得非常大，为了将它放在一个限制为 30,000 个字符的 sn-p 中，我不得不对其进行大量优化并去掉一些装饰。 对节目的要点进行了评论，希望能帮助大家理解，如有需要，我会再做补充解答，动画元素的详细解释。 动画会在点击开始按钮后开始
音乐曲目响起：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%" >
<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 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 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)" />
<!-- Moon -->
<g id="moon" stroke="#971B59" stroke- 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- 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- 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- 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- 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- 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- >
<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->
<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- 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->
<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- 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- 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- 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- 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- 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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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" >
<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>【讨论】：
【参考方案2】：动画元素如何工作的解释
#1。月亮摆动
对于月亮的均匀摆动，您需要找到绿色帽子顶角的确切坐标，以便在旋转动画命令中替换它们。
let bb = moon.getBBox();
console.log( bb.x + bb.width / 2 ); // coordinate X = 1753
console.log(bb.y); // coordinate Y = 10
为月亮旋转动画命令添加坐标值
<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"
/>
属性keyTimes ="0;0.15;0.25;0.45;0.85;1"设置月球的不均匀自转速度。
.container
width:100vw;
height:100vh;
.s0
fill:none;
stroke:#000;
#hat
stroke:#000;
fill:#30BAE4;
<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2787 768"preserveAspectRatio="xMinYMin meet" style="border:1px solid;">
<image xlink:href="https://i.stack.imgur.com/bhgP9.jpg" />
<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- >
<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- transform="rotate(30,1753,10.4)">
<path id="moon" fill="#8BECBD" d="m1729 45 28-35 36 31-28 33zM1717 37l58 48-5 8-57-49M1717 37l58 48-5 8-57-49" />
<path fill="#8BECBD" d="m1717 37 58 48-5 8-57-49z" />
<path fill="#FFFBFF" d="m1724 54c0 0-11 15-15 23-4 9-7 19-8 30-1 10 0 21 3 31 2 9 6 18 11 25 5 7 10 13 17 18 8 6 16 11 25 15 11 4 23 6 34 5 9 0 19-3 27-6 5-2 11-4 15-7 6-4 11-8 16-13 2-2 5-7 5-7l-15 3-17 0-20-5-14-7-14-13-10-15-3-6c0 0 3-1 4-1 1-1 2-2 3-3 1-2 1-4 0-6 0-1-2-1-2-2-1-1-3-2-4-4-1-1-2-2-3-4-1-2-2-4-3-6 0-4 2-13 2-13z" />
<path d="m1746 128c0 0 6 6 9 7 4 1 12 0 12 0" />
<path d="m1745 96c2 0 4 1 4 2 1 1 1 3 0 4-1 1-2 2-3 2-1 0-3-1-4-2-1-1-1-2 0-4 1-1 2-2 3-2z" />
<!-- Анимация луны an_hat.end-->
<animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="svg1.click" dur="6s" values="30,1753,10.4;
10,1753,10.4;
20,1753,10.4;
-30,1753,10.4;
0,1753,10.4;
30,1753,10.4"
keyTimes="0;0.15;0.25;0.45;0.85;1"
repeatCount="indefinite"
/>
</g>
</svg>
</div>
<script>
let bb = moon.getBBox();
console.log( bb.x + bb.width / 2 ); // координата X
console.log(bb.y); // координата Y
</script>#2。飞行帽
帽子（位图）最初隐藏在画布上边缘的后面。 当某个时间或其他条件到来时，打开帽子运动变换命令。
<image filter="url(#dropShadow)" id="Carnaval" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/e2Khg.png" >
<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" />
<g>
<image filter="url(#dropShadow)" id="GimmeSpace" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/4CE3b.png" >
<!-- 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" >
<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" >
<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" >
<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" >
<animateTransform attributeName="transform" type="translate" begin="svg1.click+10s" dur="3s"
values="0 0;-800 400;400 200;-100 780" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
</svg>
</div># 3. 步行帽
你必须先剪出帽子的轮廓 在矢量编辑器中绘制帽子的腿 在位图编辑器中，将帽子所在的位置替换为背景。可以通过左右腿交替抬高，同时移动整个人形来实现模仿走路。
3.1 抬左腿
它本质上是围绕腿的最高点旋转。 为此，有必要绘制腿部的整个轮廓，以便使用 getBBox () 找到枢轴点的坐标，就像在步骤 1 月球旋转中所做的那样
<style>
.container
width:100vw;
height:100vh;
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" />
<g id="LegL" stroke="#971B59" stroke->
<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- 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->
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
</svg>
</div>3.2 抬起右腿
<style>
.container
width:100vw;
height:100vh;
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" />
<g id="LegL" stroke="#971B59" stroke->
<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- 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->
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
</svg>
</div>3.3 交替抬腿
它是用逻辑链来实现的，可以用文字来表达： 右腿动画（1次）->左腿抬起动画（1次）->右腿动画（1次）等循环
begin="svg1.click" -> begin="RightBack.end"->begin="svg1.click;LeftForward.end"
<style>
.container
width:100vw;
height:100vh;
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" />
<g id="LegL" stroke="#971B59" stroke->
<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- 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->
<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 将帽子在空间中的运动添加到腿的动画中
<!-- 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" />
<g id="Hat+Legs" >
<g id="LegL" stroke="#971B59" stroke->
<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- 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->
<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- 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- 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- 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- 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- 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>【讨论】：
以上是关于WINTER BASH 2020 季节形象的动画的主要内容，如果未能解决你的问题，请参考以下文章
2020 Petrozavodsk Winter Camp, Jagiellonian U Contest 部分题解
2020 Petrozavodsk Winter Camp, Jagiellonian U Contest 部分题解