<div class="circle-mid1"></div>
<div class="circle-mid2"></div>
<div class="circle-left1"></div>
<div class="circle-left2"></div>
<div class="circle-right1"></div>
<div class="circle-right2"></div>
<div class="yellow1"></div>
<div class="yellow2"></div>
<div class="yellow3"></div>
<style>
  body {
    background: #62306D;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .circle-mid1, .circle-mid2{
    width:100px;
    height:100px;
    background:#E38F66;
    border-radius:50%;
    top:50px;
    position:absolute;
  }
  .circle-mid2{
    background:#AA445F;
    width:60px;
    height:60px;
    top:70;
  }

  .circle-left1, .circle-left2{
    width:100px;
    height:100px;
    background:#AA445F;
    border-radius:50%;
    bottom:50px;
    left:50px;
    position:absolute;
  }
  .circle-left2{
    background:#E38F66;
    width:60px;
    height:60px;
    bottom:70;
    left:70
  }
  .circle-right1, .circle-right2{
    width:100px;
    height:100px;
    background:#AA445F;
    border-radius:50%;
    bottom:50px;
    right:50px;
    position:absolute;
  }
  .circle-right2{
    background:#E38F66;
    width:60px;
    height:60px;
    bottom:70;
    right:70
  }

  .yellow1, .yellow2, .yellow3{
    background:#F7EC7D;
    height:250px;
    width:100px;
    position:absolute;
    z-index:-999;
    top:100
  }
  .yellow2{
    left:50px;
    top:200px;
  }
  .yellow3{
    right:50px;
    top:200px;
  }
</style>