<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>
.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%;
  -webkit-mask-image: radial-gradient(
    circle 19px at calc(100% - 25px) calc(100% - 23px),
    transparent 30px,
    #000 0
  );
}
.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.