CSSBattle 16.96: Mandala Solution

Multiple background images, gradient

target output

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

Comments

Loading comments...

Tags

css

cssbattle

Next Post

CSSBattle 16.95: Pokeball

Nov 20, 2021

Multiple background images, gradient

Previous Post

CSSBattle 16.93: Great Wall

Nov 12, 2021

Overflow, skew, margin, flex

HoningJS

Search Posts