<svg width=0 height=0>
  <clipPath id="heart" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
             C 0.5,1,0,0.7,0,0.3
             A 0.25,0.25,1,1,1,0.5,0.3
             A 0.25,0.25,1,1,1,1,0.3
             C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg>
<div class="box"></div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.box {
  width: 300px;
  height: 300px;
  clip-path: url(#heart);
  background-color: red;
}