How to realize two collapsing circles in pure css3?

Question

What i need to do is on image below:

I do not want use SVG at all. I think it is two divs with border-radius 50%. But how I merge them like on image? Can you solve this or give an advice?

Answer 1

This is a simpliest way to do it, may be you can improve it for your needs

#main {
  width: 80px;
  border-radius: 50%;
  height: 80px;
  border: 3px solid blue;
}

#background {
  background: grey;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

#small {
  background: grey;
  width: 30px;
  border-radius: 50%;
  height: 30px;
  border: 3px solid blue;
  margin-top: -30px;
  margin-left: 50px;
}

<div id="main">
  <div id="background"></div>
</div>
<div id="small"></div>