< Back to Frontend Friday Folks Index

Snowman

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (731 characters)
1 
<style>
2 
&{
3 
  background:
4 
    /* scarf */
5 
    radial-gradient(1q at 175px 148px,#FFA63F 5px, #0000),
6 
    radial-gradient(1q at 225px 148px,#FFA63F 5px, #0000),
7 
    linear-gradient(#FFA63F,#FFA63F) 50% 143px / 54px 10px no-repeat,
8 
    linear-gradient(#0000 139px, #AC474B 0 157px,#0000 0),
9
10 
    /* hat */
11 
    linear-gradient(#0E1F2B 15px,#fff 0 25px,#0E1F2B 0 30px) 50% 55px / 40px 40px no-repeat,
12 
    linear-gradient(#0E1F2B,#0E1F2B) 50% 95px / 60px 5px no-repeat,
13
14 
    /* head */
15 
    radial-gradient(1q at 190px 118px,#0E1F2B 5px, #0000),
16 
    radial-gradient(1q at 210px 118px,#0E1F2B 5px, #0000),
17 
    radial-gradient(1q at 200px 125px,#fff 30px, #0000),
18
19 
    /* body */
20 
    radial-gradient(1q at 200px 195px,#fff 50px, #AC474B);
21 
}

This was a try-out to build the snowman completely with gradients. The comments should help to identify what has been drawn.

< Back to Frontend Friday Folks Index