How to cut a circular part from an image?

by

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%;
  -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);
  
}
<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;
  -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;
}
<img src="https://picsum.photos/200/200?image=1069" >

More Related Contents:

  1. Create a Reverse Clip-Path – CSS or SVG
  2. Fill SVG path element with a background-image
  3. How to modify the fill color of an SVG image when being served as background image?
  4. SVG drop shadow using css3
  5. How to create a circle with links on border side
  6. How to apply a style to an embedded SVG?
  7. SVGs not scaling properly in IE – has extra space
  8. Add a background image (.png) to a SVG circle shape
  9. border curved css – circle with curved end
  10. How to style SVG with external CSS?
  11. html/css hexagon with image inside
  12. Setting transform-origin on SVG group not working in Firefox
  13. Responsive CSS Trapezoid Shape
  14. Circular percent progress bar
  15. Linking to CSS in an SVG embedded by an IMG tag
  16. Creating a ‘New’ spiky label with 24 or above point burst
  17. How to calculate required hue-rotate to generate specific colour?
  18. Making an svg image object clickable with onclick, avoiding absolute positioning
  19. How to change SVG color when it is an encoded CSS background image?
  20. Draw double curved item with beveled edges
  21. How to get rid of extra space below svg in div element
  22. How to get ScrollBars in SVG?
  23. CSS transform origin issue on svg sub-element
  24. Manipulating external svg file style properties with CSS
  25. Css hover sometimes doesn’t work on svg paths
  26. SVG LinearGradient hidden if svg is hidden in seperate class
  27. How do I create a teardrop in HTML?
  28. Internet Explorer and clip-path
  29. How to curve the div from bottom with image background
  30. svg background image position is always centered in internet explorer, despite background-position: left center;

Leave a Comment