CSSBattle 16.96: Mandala Solution

Approach

Background images: 1 for container, 4 for circles, 1 for last background

Result: 100% match

Implementation

1<style>
2  body {
3    background: radial-gradient(
4        100px circle at center,
5        transparent 100px,
6        #243d83
7      ), radial-gradient(
8        85px circle at 125px 50%,
9        transparent 65px,
10        #243d83 0 85px,
11        transparent
12      ), radial-gradient(
13        85px circle at 50% 75px,
14        transparent 65px,
15        #243d83 0 85px,
16        transparent
17      ), radial-gradient(
18        85px circle at 275px 50%,
19        transparent 65px,
20        #243d83 0 85px,
21        transparent
22      ), radial-gradient(
23        85px circle at 50% 225px,
24        transparent 65px,
25        #243d83 0 85px,
26        transparent
27      ), linear-gradient(to right, #6592cf, #6592cf);
28  }
29</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