<div>
<div class=yellow></div>
<span class=small-circle></span>
  <div class=block></div>
  <div class=block2></div>
</div>

<style>
  body {
    justify-content:center;
    display:flex;
    align-items:center;
    background: #E38F66;
  }
  div{
    border-radius:50%;
    background:#AA445F;
    width:200px;
    height:200px;
    position:relative;
  }
  div .yellow{
    height:140px;
    width:140px;
    background:#F7EC7D;
    border-radius:50%;
    position:absolute;
    top:30;
    left:30;
  }
  .small-circle{
    height:80px;
    width:80px;
    background:#AA445F;
    border-radius:50%;
    position:absolute;
    top:60;
    left:60;
  }
  .block, .block2{
    height:100px;
    width:100px;
    background:#AA445F;
    border-radius:100px 0px 0px 0px;
  }

  .block2{
    border-radius:0px 0px 100px 0px;
    position:absolute;
    left:100;
  }
</style>