m
< Back to Frontend Friday Folks Index

React India

Highlighted solution (644 characters)
1 
<div c></div>
2 
<div class="ellipse white"></div>
3 
<div class="ellipse green"></div>
4 
<div class="ellipse orange"></div>
5 
<style>
6 
  body {
7 
    background: #0D1335;
8 
  }
9 
  [c] {
10 
    background: #73C6EA;
11 
    border-radius: 100%;
12 
    height: 40px;
13 
    width: 40px;
14 
    position: absolute;
15 
    inset: 130px 180px;
16 
  }
17 
  .ellipse {
18 
    border-radius: 100%;
19 
    height: 90px;
20 
    width: 230px;
21 
    background: #1230;
22 
    position: absolute;
23 
    inset: 95px 75px;
24 
  }
25 
  .white {
26 
    border: 10px solid #FBFAE2;
27 
  }
28 
  .green {
29 
    border: 10px solid #4FA07B;
30 
    rotate: 120deg;
31 
  }
32 
  .orange {
33 
    border: 10px solid #DC6638;
34 
    rotate: 60deg;
35 
  }
36 
</style>
An in-person session we did at the B4Y3RW4LD Hackathon. I didn't manage to use radial gradients live, as the ellipse won't have the same sizes everywhere on the sides. I think you can approximate by doing multiple radial gradients with different sizes, but the rotation is something I didn't know how to do as well...
< Back to Frontend Friday Folks Index