CSSBattle 1.11: Eye of Sauron Solution

Approach

3 stacked circles in the middle, from outer to inner, called

2 left "wings", is the pseudo elements

Apply "half circle" style to these wings

Implementation

1<div class="c1"></div>
2<div class="c2"></div>
3<div class="c3"></div>
4<style>
5  body {
6    background: #191210;
7  }
8  div {
9    position: absolute;
10    top: 50%;
11    left: 50%;
12    transform: translate(-50%, -50%);
13  }
14  .c1 {
15    width: 140px;
16    height: 140px;
17    background: #eca03d;
18    border-radius: 100%;
19  }
20  .c2 {
21    width: 100px;
22    height: 100px;
23    background: #191210;
24    border-radius: 100%;
25  }
26  .c3 {
27    width: 50px;
28    height: 50px;
29    background: #84271c;
30    border-radius: 100%;
31  }
32  .c1::before {
33    content: "";
34    position: absolute;
35    width: 60px;
36    height: 60px;
37    top: 50%;
38    transform: translate(calc(-100% + 20px), -50%) rotate(-135deg);
39    border: solid 20px #eca03d;
40    border-radius: 100%;
41    border-bottom-color: transparent;
42    border-right-color: transparent;
43    background: transparent;
44  }
45  .c1::after {
46    content: "";
47    position: absolute;
48    width: 60px;
49    height: 60px;
50    top: 50%;
51    transform: translate(calc(100% + 20px), -50%) rotate(45deg);
52    border: solid 20px #eca03d;
53    border-radius: 100%;
54    border-bottom-color: transparent;
55    border-right-color: transparent;
56    background: transparent;
57  }
58</style>