html,body,svg { height:100% }

by octavioamu

HTML

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

<svg width="500" height="500">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefor invisible.
    -->
    <circle cx="30" cy="30" r="80"  transform="translate(0,0)"/>
  </clipPath>
     <!-- <circle cx="40" cy="35" r="30" /> -->
         <circle cx="40" cy="40" r="40"  transform="translate(0,0)"/>


  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" clip-path="url(#myClip)" transform="translate(0,0)"/>
 
  <!--
    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; */
}