html,body,svg { height:100% }

by luka kupunia

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath -->

<svg viewBox="0 0 100 100" style="width: 100%;height: auto;">
  <clipPath id="myClip">
      <rect y="110%" x="137" width="100%" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="100%" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
 
  <!-- The original black heart for reference -->
  <path id="heart" data-name="Path 798" class="cls-1" d="M0,1300H1680V1137.572L0,999.572Z" transform="translate(0 -999.572)"/>
 
  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" />
</svg>

CSS

html,body,svg { height:100% }/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

@keyframes openYourHeart {from {r: 0} to {r: 60px}}

#myClip circle {
  animation: openYourHeart 15s infinite;
}