CSSBattle 16.94: Ripples Solution

9 stacked circles

target output

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

Comments

Loading comments...

Tags

css

cssbattle

Next Post

CSSBattle 16.93: Great Wall

Nov 12, 2021

Overflow, skew, margin, flex

Previous Post

CSSBattle 16.91: Reflection

Nov 6, 2021

Stacking, positioning

HoningJS

Search Posts