<svg id="love" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 272">
  <g id="clips" fill="#000" stroke="#FFF">
    <clipPath id="clip-love">
      <path d="M78.42,207.58c13.66,7.69,20.87,6,28.57-6.41,10.11-16.29,13.33-34.94,17.55-53.21,3.75-16.2,12.58-20.82,28.45-14,11.08-18.29,27.6-24,48-19.1,21,5,29.77,21,34.66,41.48,4.11-6.85,7.25-12.81,11.07-18.28,9.21-13.19,22-20.07,38.07-18.14,16.46,2,28.17,11.61,32.75,27.4,4.7,16.17,7.26,33,10.75,49.5.1.52-.05,1.16.19,1.57,2.42,4.1,4.32,11,7.46,11.64,6.78,1.37,11.68-5,12.56-10.84,1.59-10.61,1.5-21.54,1.35-32.32-.09-6.29-2-12.54-2.49-18.86-.91-12.38,5.4-18.85,17.74-18.84,7.95,0,15.91.19,23.85-.21,4.91-.24,7.54-1.8,6.8-8.47C391,77.88,430.47,49.12,469.13,66.55,493.94,77.74,500.32,107,483.08,131c-10.2,14.2-23.75,23.1-41.28,25.44a25.68,25.68,0,0,0-4.38,1.4c3.37,27.9,24.82,48.67,54.2,52.75C503.1,212.22,509,219,508.2,229.68c-.75,9.92-7.86,15.63-19.68,14.46-38.83-3.85-68.4-25.37-82.08-67.74-1.53-4.74-2.9-9.54-4.44-14.65l-17.93,1.92c0,11.92.88,23.32-.19,34.52-2.16,22.86-22.28,49.73-52.66,46.1-15.63-1.87-26.34-10.5-31.14-24.64-4.64-13.65-6.56-28.21-9.79-42.35-1.41-6.17-2.6-12.47-4.82-18.36-2.32-6.15-6.5-6.5-10.6-1.29a40.92,40.92,0,0,0-5.2,8.88c-5.34,12.45-13.07,22.28-26.43,26.93-1.87.64-3.61,4.13-3.89,6.48-2.46,20.74-10,38.81-25.56,53.27-25.94,24.15-72.95,16.65-87.67-14.62a7.68,7.68,0,0,0-1.18-1.9c-10.09,3.24-19.56,8.31-29.27,8.84s-20.07-2.94-29.85-5.64c-3.78-1.06-5.61-.71-8.83,1.49-8,5.41-16.22,10.87-25.13,14.27-10.5,4-20.31-1.54-22.88-10.9-2.72-9.87,2.51-17.86,13.42-21.6a36.18,36.18,0,0,0,10.84-6.21c4.83-4,6.18-8.58,3.77-15.31A349.57,349.57,0,0,1,18,112.7c-2-24.18-2.91-48.21,3.72-71.82C25.45,27.61,31.64,15.68,44,8.21s21.36-6.15,31,4.36C84.46,22.89,88.78,35.73,91.21,49.1c9.41,51.86,5.08,102.8-11,152.86C79.64,203.69,79.1,205.42,78.42,207.58ZM203.85,195.2c-19.61-.85-36.43-6.82-49.09-23.49-1.37,14.18-2.09,27.85-1.16,41.41.91,13.21,9.12,19.88,22,20C191.7,233.26,206,214.62,203.85,195.2ZM55.51,50c-9.54,32.11-4.24,63.6,2.31,95.05C62.76,113.21,64.5,81.41,55.51,50Zm374.57,72.46c13.51,1.07,25-6.07,27.71-17.34.53-2.2-1.78-7-3.66-7.58-12.84-3.72-24.9-.9-24.07,16.58C430.18,116.75,430.08,119.36,430.08,122.49ZM199.86,161.11l2.28-3c-3.2-3.31-6.11-7-9.78-9.71-1.36-1-4.52.49-6.85.85.84,2.33,1,5.68,2.65,6.79C191.65,158.33,195.92,159.48,199.86,161.11Z" />
  </clipPath>
  </g>
  <g id="strokes" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="40">
    <path id="path-love" clip-path="url(#clip-love)" d="M23.32,241.32s25-8.21,38.57-27.83C75,189.63,77.28,155,77.85,122.6c-2.95-62.35-6.25-100-21.75-100C39.22,19.22,30.48,59.06,31.27,74.89c1.71,34.48,1.8,45.37,8.57,76.78,8.25,22.72,18.7,65.23,26.08,72s21,6.82,29.54,6.82,20.65-10.19,29-25.56c12.89-23.81,17-56.94,17-56.94l-6.81,54.38s1.7,29.82,13.06,38.91,20.67,15.94,42.6,9.09C208.5,244.73,215.89,226,215.89,226s7.38-22.73,8-41.47-1.71-24.87-8-36.49S200.7,129,188.68,128.4s-19.37,4.51-20.51,16.68,4.54,19.51,13.06,26.63,18.39,6.78,30.63,5.28,19.91,4.1,29.28-2.41,6.27-11.89,15.36-24.14,9.37-14.94,23.57-14.94,14.2-.54,20.45,12.53,7.39,31.38,10.8,48.42S313.15,223,327.22,226c12.87,2.73,13.63,4.2,24.43-1.71,8.46-4.63,12.49-11.07,17-26.7S363.58,148,363.58,148s26.13-2.95,48.28-2.95,38.05-4.07,46-9.58S471.5,115,474.34,105.56s.72-18.85-14.2-25.56c-11.36-5.11-21-5.68-35.22,3.41s-12.49,32.94-12.49,32.94,2.27,28.73,5.68,44.76,4.89,20.37,14.77,31.36c11.06,12.31,18.31,20.1,31,25.08l25.82,10.14" />
  </g>
</svg>
body {
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

svg {
  width: 40vw;
  visibility: hidden;
}
View Compiled
TweenMax.set("#path-love", { drawSVG: "0% 0%" });
tl = new TimelineMax({ delay: 1, repeat: -1 });
tl.set("#love", { autoAlpha: 1 });

tl.to("#path-love", 5, { drawSVG: "100%", ease: Linear.easeNone });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://assets.codepen.io/16327/DrawSVGPlugin3.min.js
  3. https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js