CSSBattle 16.94: Ripples Solution

Approach

Elements: 9 centered circles

Result: 100% match

Implementation

1<div class="circles">
2  <div c1></div>
3  <div c2></div>
4  <div c3></div>
5  <div c4></div>
6  <div c5></div>
7  <div c6></div>
8  <div c7></div>
9  <div c8></div>
10  <div c9></div>
11</div>
12<style>
13  body {
14    margin: 0;
15    background: #0e2e2c;
16  }
17  .circles {
18    height: 100vh;
19  }
20  .circles > * {
21    position: absolute;
22    top: 50%;
23    left: 50%;
24    transform: translate(-50%, -50%);
25    border-radius: 100%;
26    width: var(--size);
27    height: var(--size);
28    background: var(--color);
29  }
30  [c1] {
31    --size: 200px;
32    --color: #f3ac3c;
33  }
34  [c2] {
35    --size: 188px;
36    --color: #0e2e2c;
37  }
38  [c3] {
39    --size: 160px;
40    --color: #f3ac3c;
41  }
42  [c4] {
43    --size: 144px;
44    --color: #0e2e2c;
45  }
46  [c5] {
47    --size: 120px;
48    --color: #998235;
49  }
50  [c6] {
51    --size: 100px;
52    --color: #0e2e2c;
53  }
54  [c7] {
55    --size: 80px;
56    --color: #f3ac3c;
57  }
58  [c8] {
59    --size: 56px;
60    --color: #0e2e2c;
61  }
62  [c9] {
63    --size: 40px;
64    --color: #f3ac3c;
65  }
66</style>

Other Battle #16 solutions

#89 - Summit

#90 - Eclipse

#91 - Reflection

#92 - Sequeeze

#93 - Great Wall

#94 - Ripples

#95 - Pokeball

#96 - Mandala

References

Original challenge