< Back to Frontend Friday Folks Index

Earth

Highlighted solution (715 characters)
1 
<p><style>
2 
  body {
3 
    background: #191919;
4 
    display: grid;
5 
    place-items: center;
6 
  }
7 
  p,p:after {
8 
    position:relative;
9 
    height: 170px;
10 
    width: 170px;
11 
    background: #4f77ff;
12 
  }
13 
  p,p:before {
14 
    box-sizing: border-box;
15 
    border-radius: 50%;
16 
    border: 10px solid #191919;
17 
  }
18 
  p:before {
19 
    position: absolute;
20 
    content: '';
21 
    border-radius: 50%;
22 
    top: -30px;
23 
    left: -90px;
24 
    width: 210px;
25 
    height: 210px;
26 
    -webkit-box-reflect: right -90px;
27 
  }
28 
  p:after {
29 
    position: absolute;
30 
    content: '';
31 
    background:
32 
      repeating-linear-gradient(#0000 0 30px, #191919 0 40px),
33 
      linear-gradient(90deg, #0000 0 70px, #191919 0 80px, #0000 0)
34 
      #0000;
35 
  }
36 
</style>
37
None of us got it to 100% (yet). The solution above is only 99.9% as well. Getting the inner circle parts took a while and trying to use scale couldn't work thanks to the border. I lost my best solution somewhere while trying out different approaches.
< Back to Frontend Friday Folks Index