<div class="avatar">
  <svg class="img">
    <mask id="circle">
      <circle fill="white" cx="87.5" cy="87.5" r="87.5"></circle>
      <circle fill="black" cx="86%" cy="87%" r="19"></circle>
    </mask>
    <g mask="url(#circle)">
      <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="https://fruntend.com/storage/photos/1/articles/Thinking-About-The-Cut-Out-Effect/avatar.jpg"></image>
    </g>
  </svg>
  <span class="badge"></span>
</div>
.avatar {
  position: relative;
  --size: 175px;
  width: var(--size);
  height: var(--size);
  margin: 1rem auto;
}
.img {
  display: block;
  width: 100%;
  height: 100%;
}
.badge {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: green;
  border-radius: 50%;
  right: 10px;
  bottom: 8px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.