How to cut a circular part from an image?

Question

I am trying to clip my image with an SVG path but my image doesn\'t seem to fit in well.

This is what I am trying to achieve:

And this is what i am getting

Answer 1

Here is another easier way to do with SVG:

body {
  background:pink;
}

You can also do this using CSS and mask:

body {
  background:pink;
}

img {
  border-radius:50%;
  -webkit-mask:radial-gradient(circle at calc(100% - 20px) calc(100% - 20px),transparent 50px,#fff 51px);
          mask:radial-gradient(circle at calc(100% - 20px) calc(100% - 20px),transparent 50px,#fff 51px);
  
}

Another syntax where you can easily adjust the position of the circle:

body {
  background:pink;
}

img {
  border-radius:50%;
  padding:1px;
  -webkit-mask:
    linear-gradient(#fff,#fff),
    radial-gradient(farthest-side,#fff 98%,transparent 100%) 
      bottom -30px right -30px/
      100px 100px no-repeat;
  -webkit-mask-composite:source-out;
  
  mask:
    linear-gradient(#fff,#fff),
    radial-gradient(farthest-side,#fff 98%,transparent 100%) 
      bottom -30px right -30px/
      100px 100px no-repeat;
  mask-composite:exclude;
  transition:1s;
}
img:hover {
  -webkit-mask-position:top -30px right -30px;
          mask-position:top -30px right -30px;
}