<section>
  <div class="box heart"></div>
  <div class="box smile"></div>
</section>

<svg width="0" height="0">
  
  <clipPath id="heart">
    <path d="m224.594885,15.697638c41.417376,0 74.956149,33.531934 74.956149,74.867241c0,74.867241 -74.956149,117.495132 -149.816552,192.363057c-74.867241,-74.867925 -149.734483,-117.495816 -149.734483,-192.362373c0,-41.335307 33.538773,-74.867241 74.867241,-74.867241c37.430201,0 56.148721,18.71852 74.867241,56.148721c18.711681,-37.430201 37.430201,-56.149405 74.860402,-56.149405z"/>
  </clipPath>
  
  <clipPath id="smile">
    <path d="m149.999998,1.138641c-82.22264,0 -148.861357,66.638717 -148.861357,148.861357s66.638717,148.861357 148.861357,148.861357s148.861357,-66.638717 148.861357,-148.861357s-66.638717,-148.861357 -148.861357,-148.861357zm46.519174,93.038348c10.280737,0 18.590225,8.286228 18.590225,18.60767s-8.309487,18.60767 -18.590225,18.60767c-10.350516,0 -18.660004,-8.286228 -18.660004,-18.60767s8.309487,-18.60767 18.660004,-18.60767zm-93.561689,0c10.350516,0 18.660004,8.286228 18.660004,18.60767s-7.786147,18.60767 -18.660004,18.60767c-9.769027,0 -18.60767,-8.257153 -18.60767,-18.60767s8.838643,-18.60767 18.60767,-18.60767zm51.694432,158.165191l-9.827175,0c-42.669712,0 -77.919616,-31.981932 -83.094874,-73.267699c-0.174447,-5.524152 4.186726,-10.466814 9.245686,-10.466814l157.002212,0c5.56253,0 9.926029,4.869976 9.222426,10.466814c-4.628658,41.285767 -39.866932,73.267699 -82.548274,73.267699z" />
  </clipPath>
</svg>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  padding: 2vw;
  display: flex;
  gap: 2vw;
  flex-wrap: wrap;
  justify-content: center;
}
.box {
  width: 300px;
  height: 300px;
  background-image: url('https://fruntend.com/storage/photos/1/sunflowers.jpg');
  background-repeat: no-repeat;
}
.heart {
  clip-path: url('#heart');
}
.smile {
  clip-path: url('#smile');
}