htmlcsssvgclip-path

How to cut a circular part from an image?


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: CSS cut image circular part

And this is what i am getting:

enter image description here

This is the code I've tried:

.topbar-chat-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  clip-path: url(#topbar-img-svg);
}
<img src="https://picsum.photos/200/200?image=1069" class="topbar-chat-img" />

<svg>
                    <defs>
                        <clipPath id="topbar-img-svg">
                            <path class="svg-cls" d="M33,66A33.009,33.009,0,0,1,20.155,2.593,32.99,32.99,0,0,1,66,33a32.691,32.691,0,0,1-3.271,14.341,11.008,11.008,0,0,0-13.148,14.2A32.978,32.978,0,0,1,33,66Z"/>
                        </clipPath>
                    </defs>
                </svg>

I was also trying to change vievBox and size of svg but i couldn't fit the image.


Solution

  • Here is another easier way to do with SVG:

    body {
      background:pink;
    }
    <svg width="200" height="200">
      <defs>
        <mask id="hole">
          <circle r="100" cx="100" cy="100" fill="white"/>
          <circle r="50" cx="180" cy="180" fill="black"/>
        </mask>
      <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
        <image  xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200" />
      </pattern>
      </defs>
      <!-- create a rect, fill it with the image and apply the above mask -->
      <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
    </svg>

    You can also do this using CSS and mask:

    body {
      background:pink;
    }
    
    img {
      border-radius:50%;
      mask: radial-gradient(50px at calc(100% - 20px) calc(100% - 20px),#0000 98%,#000);
      
    }
    <img src="https://picsum.photos/200/200?image=1069" >

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

    body {
      background:pink;
    }
    
    img {
      border-radius:50%;
      padding:1px;
      mask:
        linear-gradient(#000 0 0) exclude,
        radial-gradient(50% 50%,#fff 98%,transparent 100%) 
          bottom -30px right -30px/
          100px 100px no-repeat;
      transition:1s;
    }
    img:hover {
      mask-position:top -30px right -30px;
    }
    <img src="https://picsum.photos/200/200?image=1069" >