CODEWITHSUNDEEP
csssvgmask
Резидент Казахстана
Резидент Казахстана

Reputation: 266

What should be done to make the svg mask work?

I drew two circles in svg and applied it to the html img tag but it doesn't work or I do something wrong.

I want to get such a result but only to the img tag.

enter image description here

Here's my attempt.

img {
  display: block;
  width: 100%;
  height: 100%;
  mask: url(#mask);
  -webkit-mask: url(#mask);
}

html,
body {
  margin: 0;
}

.item {
  width: 450px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

svg {
  border: 1px solid red;
}

circle {
  fill: #fff;
  stroke: red;
  stroke-width: 30px;
}
<div class="item">
  <img src="https://images.pexels.com/photos/2111143/pexels-photo-2111143.jpeg?cs=srgb&dl=pexels-oratto-oficial-2111143.jpg&fm=jpg" alt="">
</div>

<svg width="450px" height="450px">
    <mask id="mask">
      <rect width="100%" height="100%" fill="#000"/>
      <circle cx="170" cy="140" r="80"/>
      <circle cx="250" cy="280" r="150"/>
    </mask>
</svg>

Upvotes: 1

Views: 92

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

You can achieve what you want without SVG

img {
  --c:radial-gradient(farthest-side,#000 calc(100% - 9px), #0002 calc(100% - 8px) 99%,#0000);
  -webkit-mask:
    var(--c) 100% 100%/80% 80%,
    var(--c) 20%  20% /40% 40%;
  -webkit-mask-repeat:no-repeat;
}
<img src="https://picsum.photos/id/1/200/200" >

Upvotes: 2

Related Questions