<div class="cyc-1 com"></div>
<div class="cyc-2 com"></div>
<div class="cir-1 com1"></div>
<div class="cir-2 com1"></div>
<style>
  body{
  background:#62306D;
  }
  .com{
   width: 100px;
   height: 100px;
   background:#AA445F;
   position:absolute;
   border-radius:150px 150px 0 0;
  }
  .com1{
   width: 100px;
   height: 100px;
   background:#F7EC7D;
   position:absolute;
   border-radius:50%;
  }
 .cyc-1 {
   left:80px;
   top:50px;
  }
  .cyc-2{
   left:220px;
   top:150px;
   transform:rotate(180deg);
   background:#E38F66;
  }
  .cir-1{
   left:80px;
   top:100px;
  }
  .cir-2{
   left:220px;
   top:100px;
  }
</style>