<div class="avatar">
  <img class="img" src="https://fruntend.com/storage/photos/1/articles/Thinking-About-The-Cut-Out-Effect/avatar.jpg" alt="" />
  <span class="badge"></span>
</div>

<svg class="svg">
  <defs>
    <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
      <path d="M0.5,0 C0.776,0,1,0.224,1,0.5 C1,0.603,0.969,0.7,0.915,0.779 C0.897,0.767,0.876,0.76,0.853,0.76 C0.794,0.76,0.747,0.808,0.747,0.867 C0.747,0.888,0.753,0.908,0.764,0.925 C0.687,0.972,0.597,1,0.5,1 C0.224,1,0,0.776,0,0.5 C0,0.224,0.224,0,0.5,0"></path>
    </clipPath>
  </defs>
</svg>
.avatar {
  position: relative;
  --size: 175px;
  width: var(--size);
  height: var(--size);
  margin: 1rem auto;
}
.img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  clip-path: url("#my-clip-path");
  position: relative; 
}
.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.