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:

1. Hat generator. Should move unevenly up and down

2. 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.

3. The balloon should wiggle evenly.

4. The small blue hat should move along the path of the word WINTER

5. Moon wiggle. Should start after completing point 4 of the scenario

6. 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.

7. 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;
}

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;
}

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.