<div class="con">
<div class="line"></div>
</div>
<div class="con">
<div class="cir"></div>
</div>
<div class="con">
<div class="cir"></div>
</div>
<div class="con">
<div class="curve"></div>
</div>
<style>
body {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
width: 100%;
background: #FADE8B;
z-index: 1;
margin: 0;
}
.con {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
}
.line {
background: #61A74E;
height: 100%;
width: 2.5rem;
}
.cir {
background: #FADE8B;
border: 2.4rem solid #61A74E;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
}
.curve {
height: 20rem;
width: 20rem;
position: absolute;
z-index: -1;
border-radius: 50%;
background: #FADE8B;
border: 3rem solid #61A74E;
bottom: 20%;
right: 20%;
}
</style>