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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1680 300.428" style="width: 100%; height: auto;">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefor invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>
 
  The original black heart for reference
  <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
 
  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;
}