< Back to Frontend Friday Folks Index

Great Wall

Highlighted solution (608 characters)
1 
<style>
2 
  &{
3 
    background:
4 
      radial-gradient(1q,#0000 100px,#4F77FF 0),
5 
      radial-gradient(1q,#F9E492 20px,#0000 0) -40px -40px,
6 
      linear-gradient(146deg,#191919 10px,#D6B73F 0 23px,#191919 0 32px,#D6B73F 0 45px,#191919 0 53px,#D6B73F 0 67px,#0000 0) 200px 160px / 20px 100px no-repeat,
7 
      linear-gradient(#F9E492 16px,#191919 0 26px,#F9E492 0 42px,#191919 0 52px,#F9E492 0 68px,#191919 0) 220px 159px / 200px 78px no-repeat,
8 
      linear-gradient(#F9E492 16px,#191919 0 26px,#F9E492 0 42px,#191919 0 52px,#F9E492 0 68px,#191919 0) 0 172px / 200px 78px no-repeat,
9 
      #191919;
10 
  }
11 
</style>
12

This time, there were a couple of solutions. One trying to build the three lines line by line, another building part by part. As somewhat usual now, I've used gradients to solve it.

Highlighted solution (1461 characters)
1 
<style>
2 
  @property --x {
3 
    syntax: "<angle>";
4 
    inherits: false;
5 
    initial-value: 90deg;
6 
  }
7 
  @property --c {
8 
    syntax: "<color>";
9 
    inherits: false;
10 
    initial-value: #4F77FF;
11 
  }
12 
  @property --sun {
13 
    syntax: "<color>";
14 
    inherits: false;
15 
    initial-value: hsl(226.36deg 100% 65.49%);
16 
  }
17 
  &{
18 
    animation: moon 4s infinite forwards linear;
19 
    background:
20 
      radial-gradient(1q,#0000 100px,var(--c) 0),
21 
      linear-gradient(146deg,#0000 10px,#D6B73F 0 23px,#191919 0 32px,#D6B73F 0 45px,#191919 0 53px,#D6B73F 0 67px,#191919 0) 200px 160px / 20px 100px no-repeat,
22 
      linear-gradient(#F9E492 16px,#191919 0 26px,#F9E492 0 42px,#191919 0 52px,#F9E492 0 68px,#191919 0) 220px 159px / 200px 100px no-repeat,
23 
      linear-gradient(#F9E492 16px,#191919 0 26px,#F9E492 0 42px,#191919 0 52px,#F9E492 0 68px,#191919 0) 0 172px / 200px 78px no-repeat,
24 
      radial-gradient(1q,#F9E492 20px,#0000 0) calc(sin(var(--x)) * 30px * 2) calc(cos(var(--x)) * -70px),
25 
      var(--sun);
26 
  }
27 
  @keyframes moon {
28 
    0% {
29 
      --c: hsl(226.36deg 100% 10%);
30 
      --x: -120deg;
31 
      --sun: hsl(226.36deg 100% 0%);
32 
    }
33 
    10%{
34 
      --sun: hsl(26.36deg 100% 35.49%);
35 
    }
36 
    25%{
37 
      --c: hsl(226.36deg 100% 65.49%);
38 
      --sun: hsl(226.36deg 100% 65.49%);
39 
    }
40 
    40%{
41 
      --sun: hsl(256.36deg 100% 35.49%);
42 
    }
43 
    50%,100% {
44 
      --c: hsl(226.36deg 100% 10%);
45 
      --x: 140deg;
46 
      --sun: hsl(226.36deg 100% 0%);
47 
    }
48 
  }
49 
</style>
50

After getting everything done, we thought it would look fun to have a nice animation. This is the first time I've used custom properties with @property and it felt quite simple and fun to use. Happy to see a lot of browser adoption already!

< Back to Frontend Friday Folks Index