csssvgclip-pathcss-mask

I can't frame this image inside an SVG

I want to wrap this

enter image description here

inside

this SVG cloud shape

to achive a result similar to

this one
(source: i.ibb.co)

it is to say, the t-shirt should be cropped inside the cloud, following its path.

I tried to use a CSS border mask, but I was not successful:

.wrapper {
  background-image:url('https://svgshare.com/i/T9J.svg');
  background-repeat:no-repeat;
  background-size:200px;
  background-position:50% 50%;
  width:200px;
}

.svg-border-mask {
  -webkit-mask-box-image: url('https://svgshare.com/i/T9J.svg');
  mask-border: url('https://svgshare.com/i/T9J.svg');
}
<div class="wrapper">
   <img src="https://i.sstatic.net/2GKtb.png" alt="" class="svg-border-mask" />
</div>

How can I do it? I read about the clip-path way too, but I don't know how to draw this SVG path...

Solution

  • Use mask not mask-border and apply the same properties as the background to have a perfect matching:

    .wrapper {
  background-image:url('https://i.ibb.co/KjmqTs2/cloud.png');
  background-repeat:no-repeat;
  background-size:200px;
  background-position:50% 50%;
  -webkit-mask: url('https://i.ibb.co/KjmqTs2/cloud.png');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:200px;
  -webkit-mask-position:50% 50%;
  width:200px;
}
img {
  max-width:100%;
}
    <div class="wrapper">
   <img src="https://i.sstatic.net/2GKtb.png" alt="" class="svg-border-mask" />
</div>

    You can also simplify like below:

    img {
  --m:url('https://i.ibb.co/KjmqTs2/cloud.png') center/contain no-repeat;
 
  background:var(--m);
  -webkit-mask: var(--m);
  width:200px;
  padding:0 20px; /* some padding to control the shape */
}
    <img src="https://i.sstatic.net/2GKtb.png" >

<img src="https://i.sstatic.net/2GKtb.png" style="width:100px;padding:0">

<img src="https://i.sstatic.net/2GKtb.png" style="width:100px;padding:0 30px">