javascripthtmlcssanimationsvg
Animation of the image of the WINTER BASH 2020 season
WINTER BASH 2020 season is coming to an end, and I thought it would be instructive to figure out the CSS and other markup for generating the excellent logo shown here:
In the image below, the numbers indicate the desired objects for animation
Animation script:
Hat generator. Should move unevenly up and down
The question mark should float in space with a simultaneous change in size. What does the collection of information about the disclosure of the conditions for obtaining "secret hats" symbolize.
The balloon should wiggle evenly.
The small blue hat should move along the path of the word WINTER
Moon wiggle. Should start after completing point 4 of the scenario
The big blue hat moves forward in search of new hats. Some time after the start of step 6, hats should begin to fall from above.
Animation of stars, should start after finding all the hats.
I managed to implement the first point of the scenario.
Hat animation starts after clicking on the canvas
.container {
width:100vw;
height:100vh;
}
.s0{
fill:none;
stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2787 768"preserveAspectRatio="xMinYMin meet" style="border:1px solid;">
<image xlink:href="https://i.sstatic.net/Qe1A9.jpg" height="100%" width="100%"/>
<g id="hat" transform="translate(-1320,-180)" >
<path d="m1299.3 183.9 46.5-16.7 2.7 6-46.7 16.7zM1308.9 180.6l-10.2-29.1 28.5-9.9 10.4 28.8" />
<path d="m1308.9 180.6-10.2-29.1 28.5-9.9 10.4 28.8z" />
</g>
<g id="winterHat" stroke="#971B59" stroke-width="2" >
<path fill="#2FBAE5" d="M938.7 261.2H1063.9V631.7H938.7Z" />
<path d="M957.4 261.2V631.7" />
<path d="M976.1 261.2V631.7" />
<path d="M993.2 261.2V631.7" />
<path d="M1009.4 261.2V631.7" />
<path d="M1025.5 261.2V631.7" />
<path d="M1045.1 261.2V631.7" />
<path d="M1063.9 261.2V631.7" />
<path id="brimHat" fill="#FCB660" d="M938.7 194.3 927.9 194.1c0 0-13.2 0.4-18.7 3.5-3.8 2.2-7.1 5.8-8.7 9.9-1.8 4.4-1 9.4-0.6 14.2 0.4 4.7 1.2 9.5 3 13.9 1.9 4.5 4.8 8.6 7.8 12.3 4 4.9 8.3 9.7 13.6 13.3 6.4 4.3 13.8 6.9 21.1 9.3 6.9 2.3 14.2 3.7 21.4 4.8 6.1 1 12.2 1.2 18.4 1.8 5.9 0.5 11.8 1.4 17.8 1.5 4.9 0.1 9.9-0.2 14.8-0.6 5.6-0.5 11.3-1.1 16.9-2.1 6.7-1.2 13.3-2.6 19.9-4.5 8.3-2.4 16.9-4.3 24.4-8.6 6.4-3.6 12.1-8.5 16.9-14 4.5-5.3 8.4-11.3 10.8-17.8 2-5.4 4-11.5 2.7-17.2-1.3-5.8-5.1-11.3-9.9-14.8-3.6-2.5-12.6-3.3-12.6-3.3l-12.9-0.6z" />
<path id="brimHat2" fill="#971B59" d="m924.2 194.3c0 0-5.5 6.6-6.6 10.5-0.9 3.3-0.6 6.9 0 10.2 0.8 4.3 2.3 8.6 4.5 12.3 2.2 3.8 5.3 6.9 8.4 9.9 4 3.9 8.4 7.5 13.3 10.2 6.3 3.5 13.2 5.7 20.2 7.5 7 1.9 14.2 2.9 21.4 3.6 5.1 0.6 10.2 0.7 15.4 0.8 5.7 0 11.5-0.4 17.2-0.8 6.5-0.4 13.1-0.7 19.6-1.8 6.3-1.1 12.7-2.3 18.7-4.8 6.5-2.7 12.8-6.2 18.1-10.8 6-5.4 11.9-11.7 14.8-19.3 2.1-5.8 2.9-12.5 1.1-18.4-1.1-3.6-7.1-8.7-7.1-8.7z" />
<path id="topHat" fill="#FCB660" d="m938.7 217.8c0 0-1.2-24.8-1.9-37.1-1.2-21.7-2.3-42.8-3.9-65-0.3-4-2.2-10.5 5.8-10.5 40 0 84.2-2.1 125.6 0.5 4.1 0.3 10.9-0.5 11.8 3.4 0.7 3-0.4 7.8-0.4 7.8l-4.2 53.6-2.9 47.1z" />
<path id="bottomHat" fill="#FEFBFE" d="m938.7 221.1 129.4 0.1-0.5 16.7c0 0-38.7 5.5-58.2 5.7-22.6 0.2-67.7-5.4-67.7-5.4z" />
</g>
<path id="cloud" stroke="#971B59" stroke-width="2" fill="#FFFCFF" d="m843.3 766.3c-14.1-0.4-27.4-11.9-34.9-23.8-7-11.2-10.2-26.7-6-39.2 3.7-10.8 24.7-23.8 24.7-23.8 0 0 15.3-5.2 23-4.3 9.9 1.2 17.8 5.5 27.3 12.1 5.2 3.6 15.5 1.3 17-2.7 4.6-12.1 6.8-23 12.7-33.4 5.7-10 12.2-20.5 21.7-27.1 10.1-7 23-8.8 34.9-11.4 7.1-1.5 14.4-2.6 21.7-2.4 8.1 0.3 16.4 1.4 24 4.2 7 2.6 11.9 9.8 19.2 11.3 5.5 1.1 16.6-2.2 16.6-2.2 0 0 6-19.3 11.3-27.7 9.9-15.6 21.8-30.9 37.3-41 15.6-10.1 34.4-16.2 53-17.5 14.7-1 29.7 2.5 43.4 7.8 15.7 6.1 30.9 15.1 42.8 27.1 6.2 6.2 9 14.1 13.9 22.3 1.9 3.2 6.9-0.6 10.2 0 3.9 0.7 7.5 5.8 11.1 4.2 9.9-4.4 17.8-9.1 27.4-11.4 8.4-2.1 17.2-3 25.9-2.4 11.5 0.8 23.2 3.2 33.7 7.8 10.9 4.9 21.4 11.6 29.5 20.5 9.3 10.2 16.1 23 20.5 36.1 2.4 7.1 2.4 14.9 2.8 22.4 0.4 6.5-2.5 13.6 0 19.6 0.9 2.2 3.3 3.6 5.1 5.1 2.7 2.2 5.8 8.1 8.5 6 6.4-5.2 13.6-8.3 21.3-9.4 7.7-1 16.7-1.2 23 3.4 9.9 7.3 15.6 20.9 16.2 33.2 0.4 8.8-3.4 18.2-9.4 24.7-4.9 5.3-19.6 9.4-19.6 9.4 0 0-408 8.1-609.9 2.6z" />
<!-- Hat animation on blue rectangles -->
<animateTransform id="an_BigHat" xlink:href="#winterHat" attributeName="transform" type="translate" begin="svg1.click;an_BigHat.end+3s" dur="4s" values="0,0;0,250;0,0;0,300;0,250;0,400;0,100;0,500;0,0" repeatCount="1" />
</svg>
</div>When implementing the moon wobble animation, I was unable to achieve the desired moon wobble trajectory.
.container {
width:100vw;
height:100vh;
}
.s0{
fill:none;
stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2787 768"preserveAspectRatio="xMinYMin meet" style="border:1px solid;">
<image xlink:href="https://i.sstatic.net/Qe1A9.jpg" height="100%" width="100%"/>
<g id="hat" transform="translate(-1320,-180)" >
<path d="m1299.3 183.9 46.5-16.7 2.7 6-46.7 16.7zM1308.9 180.6l-10.2-29.1 28.5-9.9 10.4 28.8" />
<path d="m1308.9 180.6-10.2-29.1 28.5-9.9 10.4 28.8z" />
</g>
<g id="winterHat" stroke="#971B59" stroke-width="2" >
<path fill="#2FBAE5" d="M938.7 261.2H1063.9V631.7H938.7Z" />
<path d="M957.4 261.2V631.7" />
<path d="M976.1 261.2V631.7" />
<path d="M993.2 261.2V631.7" />
<path d="M1009.4 261.2V631.7" />
<path d="M1025.5 261.2V631.7" />
<path d="M1045.1 261.2V631.7" />
<path d="M1063.9 261.2V631.7" />
<path id="brimHat" fill="#FCB660" d="M938.7 194.3 927.9 194.1c0 0-13.2 0.4-18.7 3.5-3.8 2.2-7.1 5.8-8.7 9.9-1.8 4.4-1 9.4-0.6 14.2 0.4 4.7 1.2 9.5 3 13.9 1.9 4.5 4.8 8.6 7.8 12.3 4 4.9 8.3 9.7 13.6 13.3 6.4 4.3 13.8 6.9 21.1 9.3 6.9 2.3 14.2 3.7 21.4 4.8 6.1 1 12.2 1.2 18.4 1.8 5.9 0.5 11.8 1.4 17.8 1.5 4.9 0.1 9.9-0.2 14.8-0.6 5.6-0.5 11.3-1.1 16.9-2.1 6.7-1.2 13.3-2.6 19.9-4.5 8.3-2.4 16.9-4.3 24.4-8.6 6.4-3.6 12.1-8.5 16.9-14 4.5-5.3 8.4-11.3 10.8-17.8 2-5.4 4-11.5 2.7-17.2-1.3-5.8-5.1-11.3-9.9-14.8-3.6-2.5-12.6-3.3-12.6-3.3l-12.9-0.6z" />
<path id="brimHat2" fill="#971B59" d="m924.2 194.3c0 0-5.5 6.6-6.6 10.5-0.9 3.3-0.6 6.9 0 10.2 0.8 4.3 2.3 8.6 4.5 12.3 2.2 3.8 5.3 6.9 8.4 9.9 4 3.9 8.4 7.5 13.3 10.2 6.3 3.5 13.2 5.7 20.2 7.5 7 1.9 14.2 2.9 21.4 3.6 5.1 0.6 10.2 0.7 15.4 0.8 5.7 0 11.5-0.4 17.2-0.8 6.5-0.4 13.1-0.7 19.6-1.8 6.3-1.1 12.7-2.3 18.7-4.8 6.5-2.7 12.8-6.2 18.1-10.8 6-5.4 11.9-11.7 14.8-19.3 2.1-5.8 2.9-12.5 1.1-18.4-1.1-3.6-7.1-8.7-7.1-8.7z" />
<path id="topHat" fill="#FCB660" d="m938.7 217.8c0 0-1.2-24.8-1.9-37.1-1.2-21.7-2.3-42.8-3.9-65-0.3-4-2.2-10.5 5.8-10.5 40 0 84.2-2.1 125.6 0.5 4.1 0.3 10.9-0.5 11.8 3.4 0.7 3-0.4 7.8-0.4 7.8l-4.2 53.6-2.9 47.1z" />
<path id="bottomHat" fill="#FEFBFE" d="m938.7 221.1 129.4 0.1-0.5 16.7c0 0-38.7 5.5-58.2 5.7-22.6 0.2-67.7-5.4-67.7-5.4z" />
</g>
<path id="cloud" stroke="#971B59" stroke-width="2" fill="#FFFCFF" d="m843.3 766.3c-14.1-0.4-27.4-11.9-34.9-23.8-7-11.2-10.2-26.7-6-39.2 3.7-10.8 24.7-23.8 24.7-23.8 0 0 15.3-5.2 23-4.3 9.9 1.2 17.8 5.5 27.3 12.1 5.2 3.6 15.5 1.3 17-2.7 4.6-12.1 6.8-23 12.7-33.4 5.7-10 12.2-20.5 21.7-27.1 10.1-7 23-8.8 34.9-11.4 7.1-1.5 14.4-2.6 21.7-2.4 8.1 0.3 16.4 1.4 24 4.2 7 2.6 11.9 9.8 19.2 11.3 5.5 1.1 16.6-2.2 16.6-2.2 0 0 6-19.3 11.3-27.7 9.9-15.6 21.8-30.9 37.3-41 15.6-10.1 34.4-16.2 53-17.5 14.7-1 29.7 2.5 43.4 7.8 15.7 6.1 30.9 15.1 42.8 27.1 6.2 6.2 9 14.1 13.9 22.3 1.9 3.2 6.9-0.6 10.2 0 3.9 0.7 7.5 5.8 11.1 4.2 9.9-4.4 17.8-9.1 27.4-11.4 8.4-2.1 17.2-3 25.9-2.4 11.5 0.8 23.2 3.2 33.7 7.8 10.9 4.9 21.4 11.6 29.5 20.5 9.3 10.2 16.1 23 20.5 36.1 2.4 7.1 2.4 14.9 2.8 22.4 0.4 6.5-2.5 13.6 0 19.6 0.9 2.2 3.3 3.6 5.1 5.1 2.7 2.2 5.8 8.1 8.5 6 6.4-5.2 13.6-8.3 21.3-9.4 7.7-1 16.7-1.2 23 3.4 9.9 7.3 15.6 20.9 16.2 33.2 0.4 8.8-3.4 18.2-9.4 24.7-4.9 5.3-19.6 9.4-19.6 9.4 0 0-408 8.1-609.9 2.6z" />
<!-- Hat animation on blue rectangles -->
<animateTransform id="an_BigHat" xlink:href="#winterHat" attributeName="transform" type="translate" begin="svg1.click;an_BigHat.end+3s" dur="4s" values="0,0;0,250;0,0;0,300;0,250;0,400;0,100;0,500;0,0" repeatCount="1" />
<!-- Moon -->
<g id="moon" stroke="#971B59" stroke-width="2" transform="rotate(30,1750,10.4)">
<path fill="#8BECBD" d="m1729 45 28-35 36 31-28 33zM1717 37l58 48-5 8-57-49M1717 37l58 48-5 8-57-49" />
<path fill="#8BECBD" d="m1717 37 58 48-5 8-57-49z" />
<path fill="#FFFBFF" d="m1724 54c0 0-11 15-15 23-4 9-7 19-8 30-1 10 0 21 3 31 2 9 6 18 11 25 5 7 10 13 17 18 8 6 16 11 25 15 11 4 23 6 34 5 9 0 19-3 27-6 5-2 11-4 15-7 6-4 11-8 16-13 2-2 5-7 5-7l-15 3-17 0-20-5-14-7-14-13-10-15-3-6c0 0 3-1 4-1 1-1 2-2 3-3 1-2 1-4 0-6 0-1-2-1-2-2-1-1-3-2-4-4-1-1-2-2-3-4-1-2-2-4-3-6 0-4 2-13 2-13z" />
<path d="m1746 128c0 0 6 6 9 7 4 1 12 0 12 0" />
<path d="m1745 96c2 0 4 1 4 2 1 1 1 3 0 4-1 1-2 2-3 2-1 0-3-1-4-2-1-1-1-2 0-4 1-1 2-2 3-2z" />
<!-- Moon animation an_hat.end-->
<animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="svg1.click" dur="6s" values="30,1450,10.4;
10,1450,10.4;
20,1450,10.4;
-30,1450,10.4;
0,1450,10.4;
30,1450,10.4"
keyTimes="0;0.15;0.25;0.45;0.85;1"
repeatCount="indefinite"
/>
</g>
</svg>
</div>I hope that this question will leave all readers with warm memories of the 2020 holiday season. Also, I hope that this question and answer will be helpful to others in the future.
Solution
The code turned out to be quite large, to place it in a snippet with a limit of 30,000 characters, I had to optimize it quite a lot and get rid of some embellishments.
Comments remained on the main points of the program, I hope they will help you understand, if there is a need, I will make an additional answer with detailed explanations of the animation elements.
The animation will start after clicking the Start button
The music track sounds: Candy Dulfer / Dave Stewart - Lily Was Here
.container {
width:100vw;
height:100vh;
}
.s0{
fill:none;
stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}
#Stroke_bottom {
fill:#8DEBB5;
stroke:#971B59;
stroke-width:4;
stroke-dashoffset:350;
stroke-dasharray:350;
fill-opacity:0;
filter:url(#dropShadow);
}
#q {
fill:#8DEBB5;
stroke:#971B59;
stroke-width:4;
stroke-dashoffset:1366;
stroke-dasharray:1366;
fill-opacity:0;
filter:url(#dropShadow);
}
#cloud {
fill:#FFFCFF;
stroke:#971B59;
stroke-width:6;
stroke-dashoffset:1649;
stroke-dasharray:1649;
filter:url(#dropShadow);
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<!-- Trail running along the word "Winter" of the little blue hat -->
<path id="trace" stroke="none" d="m1115 163 46 98 25-52 26 53 46-97 25 1v97h33l1-97 81 99v-99l57 1 1 98 3-1-1-98h37 22v98l61 1 1-3-58-2v-46l55 1v-5h-54v-41l79-4v99h4l-1-40 27-1 22 41 4-1-21-40c0 0 10-4 14-8 4-3 7-7 9-12 2-6 3-13 1-19-2-6-6-10-11-14-4-3-9-4-14-5-10-2-31-1-31-1" />
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
<filter id="shadow" x="-10%" y="-10%" width="200%" height="200%">
<feOffset result="offsetResult" in="SourceAlpha" dx="2" dy="2" />
<feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="4" />
<feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
</filter>
<mask id="msk" >
<!-- Stars in the background -->
<rect width="100%" height="100%" fill="white" />
<path d="m280 446c0 0-1 7-3 11-1 3-3 6-6 8-3 2-6 3-9 4-2 1-6 3-6 3 0 0 4 1 6 2 3 1 5 1 8 3 2 2 4 4 6 6 1 2 2 5 3 7 1 2 2 7 2 7 0 0 1-5 2-8 1-3 2-6 4-8 2-2 5-4 7-5 4-2 14-4 14-4 0 0-5-1-8-2-3-1-5-2-8-4-3-2-5-5-6-8-2-4-2-5-4-12zM166 315" />
<path d="m166 315c0 0-1 5-3 8-1 2-2 5-4 6-3 2-10 4-10 4 0 0 5 1 8 3 2 1 4 2 5 4 1 2 3 3 3 5 1 2 1 5 1 5 0 0 1-5 2-7 1-2 2-3 3-4 1-1 3-2 5-3 2-1 7-2 7-2 0 0-3-1-5-2-2-1-4-1-6-3-2-2-3-4-4-6-1-2-3-7-3-7z" />
<path d="m1715 288c-2 5-3 9-5 12-2 4-5 7-8 10-3 2-7 3-11 4-3 1-8 2-8 2 0 0 6 1 9 2 4 1 8 2 11 5 3 2 6 6 8 9 3 5 5 15 5 15 0 0 2-11 5-15 2-3 5-6 8-8 3-2 7-3 11-5 2-1 7-2 7-2 0 0-5-2-8-3-3-1-6-1-9-3-3-2-6-5-8-8-3-4-3-9-6-14z" />
<path d="m1557 61c0 0-1 4-2 6-1 2-2 3-3 4-2 2-4 2-6 3-1 1-4 1-4 1 0 0 4 2 6 3 2 1 3 2 5 4 1 2 2 3 3 5 1 1 2 4 2 4 0 0 1-4 2-5 1-2 2-3 4-5 2-1 4-2 5-3 1-1 4-2 4-2 0 0-3-1-5-2-2-1-4-2-5-4-1-1-2-3-3-5-1-1-2-4-2-4z" />
<path d="m2380 375c0 0-2 7-3 10-1 4-3 7-5 10-2 3-6 4-9 6-3 2-10 3-10 3 0 0 6 2 9 3 4 2 8 3 11 6 3 3 4 8 6 12 1 3 2 8 2 8 0 0 2-6 3-9 1-3 3-7 5-10 2-3 5-5 9-6 4-2 12-4 12-4 0 0-6-2-8-3-2-1-5-2-7-3-2-1-4-3-6-6-2-2-2-5-3-7-1-3-4-10-4-10z" />
<path d="m2473 233c0 0-1 4-3 6-1 2-2 3-4 5-2 2-3 3-5 4-1 1-4 1-4 1 0 0 4 2 6 3 2 1 4 2 5 4 1 2 2 4 3 6 1 2 2 5 2 5 0 0 1-4 2-6 1-2 2-4 3-5 1-1 3-2 4-3 2-1 7-3 7-3 0 0-5-2-8-3-2-1-3-2-4-4-1-1-1-3-2-5 0-1-1-3-1-3z" />
<path d="m2269 59c0 0-2 1-3 2-2 1-3 3-5 4-2 1-5 1-7 1-2 0-6 0-6 0 0 0 3 3 5 5 1 2 2 3 2 5 1 3 0 5 0 8 0 1 0 3 0 3 0 0 4-3 6-5 1-1 3-2 4-2 2 0 4 0 6 0 2 0 6 1 6 1 0 0-3-3-4-4-1-2-3-3-4-6-1-2 0-4 0-6 0-2 1-5 1-5z" />
<path d="m1477 596c0 0-1 3-2 5-1 2-2 4-3 5-2 2-5 3-8 5-1 1-4 1-4 1 0 0 4 1 5 1 2 1 4 2 6 3 2 2 3 4 4 7 1 2 2 5 2 5 0 0 1-4 2-6 1-2 2-3 4-5 1-1 3-2 5-3 2-1 5-2 5-2 0 0-3-2-5-3-2-1-3-2-5-3-2-2-3-4-4-6-1-1-2-4-2-4z" />
<path d="m830 136c0 0-1 8-2 11-1 2-2 4-4 5-1 1-3 2-4 3-2 1-6 2-6 2 0 0 4 2 6 3 2 1 4 2 5 4 1 1 2 3 3 5 1 2 2 6 2 6 0 0 1-5 2-7 1-1 2-3 3-4 2-1 4-2 5-3 2-1 6-3 6-3 0 0-4-1-6-2-2-1-3-2-4-3-1-1-2-3-3-4-1-3-2-11-2-11" />
</mask>
<radialGradient id="grad_bl" cx="20%" cy="20%" r="30%" fx="30%" fy="30%">
<stop stop-color="white" offset="20%"/>
<stop stop-color="#31BCE5" offset="90%"/>
</radialGradient>
</defs>
<!-- Bottom background -->
<rect width="100%" height="100%" fill="yellow" >
<!-- Animation of stars twinkling through the mask -->
<animate id="back" attributeName="fill" begin="btn1.click+80s;back.end+5s" dur="1s" values="red;yellow;cyan" fill="freeze" repeatcount="10" />
</rect>
<image xlink:href="https://i.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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.sstatic.net/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>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices