<svg id="love" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 763.43">
  <g id="clips" fill="#1B1D1F">
    <clipPath id="clip_l1">
      <path
        d="M144.29,663.06c16.33-15.27,37.65-52.13,59.48-103,16.62-51.76,29.53-104.36,37-158.29a885.92,885.92,0,0,0,8.37-92,839.12,839.12,0,0,0-13.78-184.42c-4.06-21.51-10-42.43-19.82-62.11-9.37-18.86-21.5-35.62-37.87-49.08q-27.9-23-61.22-8.79a130.14,130.14,0,0,0-14.37,7.19c-6.11,7-11,16.7-13.75,29.92C84,63.68,94.8,86.89,104.64,102.63A197.53,197.53,0,0,0,125.49,130a28.85,28.85,0,0,1,9.93,17.54c1.39,6,2.82,12,4.09,18,7.85,37.18,9.93,74.83,9.21,112.72a783.9,783.9,0,0,1-6.88,88.06c-.21,1.6-.43,3.2-.74,4.83-8,55.74-32.56,157.88-58,196.33.67,10.34-3.63,18.63-13.26,26.39a96.6,96.6,0,0,1-29,16.43,75.93,75.93,0,0,0-20.41,10.35C5.07,632.06-2.24,647.11.6,666.24,3.66,686.81,14.87,701.1,35,707.52c11.53,3.68,23.06,2.56,34.29-1.7,17.53-6.65,33.72-15.87,49.41-26,7.84-5.06,15.59-10.24,23.35-15.42A26,26,0,0,1,144.29,663.06Z" />
    </clipPath>
    <clipPath id="clip_l2">
      <path
        d="M325.37,654.08c25.05-25.48,40.39-57.93,49.51-77.25l.43-.91c8.69-18.39,16.38-47.66,24.52-78.65,5.38-20.49,10.94-41.67,17.48-62.76,11.92-38.47,16.2-57.16-13.33-73.1l-.07.09-5-1.84c-8.34-3-16.83-5.28-25.75-5.66-15.51-.67-27.93,5-36.94,17.8A66,66,0,0,0,326.53,392c-2.56,9.12-4.76,18.35-6.92,27.58-5.57,23.81-10.55,47.77-18.07,71.08-6.93,21.47-15.57,42.15-27.68,61.27-4.48,7.06-9.45,13.72-15.81,19.23a33.11,33.11,0,0,1-25.83,8.39c-10.17-1-19.24-5.1-28.16-9.65a8,8,0,0,1-1.1-.72c-23.85-12.62-34.59-56.43-45.18-108.1-2.47-12.05-4.61-22.47-6.62-29.21-4.88-16.33-8.56-36.07-11.67-56-.32-1.22-.69-2.43-.9-3.67-4-23.45-8.44-46.83-11.71-70.38a449.64,449.64,0,0,1-3.29-97.15,358.61,358.61,0,0,1,9-56.12c.25-1.05.58-2.07.9-3.1,3.59-13.83,8.52-24.78,14.26-31.39,27-47.67,36.51-84.26,25.3-98.93-9-11.75-33.34-12.66-70.57-2.7C82.58,23.89,67.09,40.18,55.54,60.81c-10.59,18.92-17,39.34-22,60.32-7.57,32.26-10.36,65.06-10.65,98.1-.22,25.16,1.44,50.25,3.28,75.33q3.24,44.37,10.18,88.27A949.67,949.67,0,0,0,69.18,521.64c3.79,11.89,8,23.63,11.85,35.51,3.66,11.49,2.68,20.56-3.22,28.64a306.6,306.6,0,0,0,40.79,57.6,231.38,231.38,0,0,0,22.31,21.75l1.13-.75a20.93,20.93,0,0,1,17.66-2.88c1.45.37,2.89.81,4.34,1.19,15.12,4,30.18,8.21,45.39,11.83a120.66,120.66,0,0,0,71.27-4.11q15.69-5.79,31.38-11.6C316.4,657.24,320.75,655.72,325.37,654.08Z" />
    </clipPath>
    <clipPath id="clip_o1">
      <path
        d="M650.72,540.13c.87-15.36.21-30.15-.7-50.37l-.19-4.1c-1.17-26.34-4.65-37.5-9.91-54.4-1.14-3.63-2.38-7.63-3.7-12.08l-.06.1c-.5-1.12-.74-1.54-.89-2-.35-1.11-.66-2.23-1-3.35-4.52-15.88-10-31.38-18.11-45.86-14.3-25.49-34.56-44.18-62.28-54.23a152.81,152.81,0,0,0-51.39-9.24c-27.33-.18-51.8,8-72.61,26.08A132.77,132.77,0,0,0,407,357c-1,1.49-2,3-3.06,4.52l-.08,0c-6.95,19-7.67,33.29-2.19,43.53s17.1,16.25,28.85,21.26c23.4,10,54.14,3.76,69.31-13.82-.22-.85-.45-1.73-.67-2.68,3.39-.88,6.39-1.73,9.43-2.42A7.18,7.18,0,0,1,515,409.1c8.42,6.84,15.27,15.16,22.94,23.28l-.14.18C552.91,451.75,550,491.18,543.25,538h0c1.7,7.12,1,13.78.09,20.32C540,583.14,529.5,604.38,510.47,621c-19.68,17.19-42.33,20.81-66.82,13-17.73-5.63-28-18.43-32.23-36.31-2.36-10-2.5-20.16-2.78-30.29A660.57,660.57,0,0,1,411.07,492c.24-2.81.29-5.65.51-8.47.12-1.6.41-3.19.78-6h0c-4.25-29.07-20.13-55.89-41.62-66.54-16.55-8.21-34.05-5.33-51.09,8.23l-.06.25c-4.88,20.83-9.3,41.78-15.37,62.31-5.38,66.34,2.15,123.68,22.91,174.12.55,1,1.07,1.92,1.54,2.87,9.05,18.21,21.48,33.77,37.73,45.94,44.76,33.53,94.56,41.67,148.17,27.71,31-8.07,55.87-25.9,76.83-49.78,29.54-33.64,46.36-73.07,53.93-116.79,1.08-6.23,1.66-12.55,2.93-18.73A26.17,26.17,0,0,1,650.72,540.13Z" />
    </clipPath>
    <clipPath id="clip_v1">
      <path
        d="M1050.51,450.21h.14c-.92-20.21-.91-36.56-.9-49.87,0-21.42,0-35.57-4.12-41.82-3.11-4.68-10.93-7.34-28.2-9.42l-5.1.08c-11,.25-22.07-.08-32.89,1.44-20.23,2.85-32.64,15.83-36.18,35.94-1.79,10.17-.66,20.25.82,30.31,1.36,9.22,3.51,18.35,4.36,27.6.95,10.42,1.11,20.94,1.14,31.42.07,21.65-.27,43.29-3,64.82-1.1,8.58-3.2,16.66-8.82,23.49-3.69,4.49-8.09,7.87-13.83,9.31-8.32,2.1-12.48.59-16.66-6.87-3.08-5.51-5.45-11.41-8.41-17a44.54,44.54,0,0,1-4.3-12.62c-4.69-24.33-9.55-48.64-14.43-72.94-4.38-21.87-9.18-43.65-15.72-65-8.13-26.51-23.48-47.61-47.87-61.54-14.85-8.48-31-12.81-47.93-14.45-26.74-2.59-51.29,3.21-73.33,18.83a128.41,128.41,0,0,0-33.44,35.4c-7.87,12.15-15.09,24.72-22.6,37.1l-1,1.61-.05.11-.48.79c-.24.39-.52.76-.77,1.14s-.49.78-.76,1.2l0,0c-9.88,13.89-27.63,21.19-51.68,21.19-1,0-2,0-3.08,0-18-.45-34.48-4.61-43.46-8L534,437.32,509.31,427c-4.81-2-7.8-5.42-8.63-10.66-.34-2.1-1-4.14-1.55-6.6l.06,0c-8.62-20.79-37-58.56-63.16-62.18-13.63-1.88-25.16,6.08-35.2,24.33a160.45,160.45,0,0,0-6.2,27.94c-3.74,29.93,2.22,56,17.73,77.8v0c34.47,41.65,79.76,57.68,130.94,60.36l.12.56,3,.39c23.46,3,72.84,9.25,103.49,2.8a18.49,18.49,0,0,1,11.49-10.53c16.43-5.87,30.33-15.81,42.11-28.7,12.06-13.19,20.86-28.41,27.91-44.71a106.26,106.26,0,0,1,14.6-24.92,37.43,37.43,0,0,1,8-7.42c4.35-2.93,8.69-2.15,11.94,2a29.89,29.89,0,0,1,4.58,8.22,154.74,154.74,0,0,1,6,19q10.74,48.48,21,97.08c4,18.91,8.36,37.7,15,55.85,10.25,27.84,28.54,48.51,56.57,59.06,37.72,14.2,74.75,12.05,109.47-9.08,35.79-21.79,57.47-54.3,67.75-94.56,4.91-19.21,4.63-39,4.77-58.6.12-16.48-.53-33-.82-49.45C1050.25,453.51,1050.41,452,1050.51,450.21Z" />
    </clipPath>
    <clipPath id="clip_e1">
      <path
        d="M1294,233c-12.44,1.49-41.69,9.36-44.4,50.24h-.17a17.32,17.32,0,0,1-.81,4.43,57,57,0,0,1-23.37,30.82,70.88,70.88,0,0,1-22.69,10l0,.05c-7.9,2-76.43,18.62-134.86,19.23a29.1,29.1,0,0,1-5.41.62c-16.29.47-32.6.45-48.89.8-26,4-42.36,16.38-46.24,35s5.65,40.66,21.64,50.4c25.92,15.78,45.06,16.72,61.69,15.64h0l41.13-4.41v0l20.79-2.33c26.66-3,68.92-7.69,86.72-9.87a14,14,0,0,1,2.8-1.25c5.35-1.18,10.73-2.27,16.09-3.38,56.62-11.66,96.27-45,121.59-96,11.12-22.41,15.23-46.51,11.47-71.43-.26-1.7-.55-3.37-.87-5C1340.37,241.54,1319.28,230,1294,233Z" />
    </clipPath>
    <clipPath id="clip_e2">
      <path
        d="M1395.21,621.72c-1.48-19.11-10.79-32.84-28.37-40.79a73.26,73.26,0,0,0-20.15-5.57c-20.1-2.83-39.45-8.23-57.62-17.32-43.77-21.89-73-56-86.15-103.39a114.69,114.69,0,0,1-4-21,16,16,0,0,1,3-1.34l.66-.14c-8.19-32.4-19.29-79.05-23-101.68l-1.49-.28c.8-13.35-1.66-26.33,1.16-39.22,3.69-16.83,14.72-26.44,32-27.8a78.23,78.23,0,0,1,28.13,3.15,7.24,7.24,0,0,1,3.49,1.73,41.36,41.36,0,0,1,3.41,4.6c28.9,19.95,68.17,26.8,89.79,15.56,8.53-4.43,13.78-11.51,15.69-21.08-.2-1.89-.42-3.79-.71-5.69-5.39-35.73-24.22-62.62-55.47-80.55a153.12,153.12,0,0,0-64.46-19.62c-30-2.47-58.27,3.32-83.91,18.89-49.83,30.27-71.68,75.95-71.13,133.28.06,6.14,1,12.28,1.22,18.43.42,9.79-2.58,14.64-10.65,16,5.28,22.84,17.65,66.16,26.9,97.65l1.47-.16c2.22,7.33,4.39,14.29,6.43,21.29,7.76,26.59,17.36,52.44,30.91,76.71,27.24,48.81,65.58,85.64,117,108.33,25.17,11.11,51.58,17.71,78.8,21.24,10.44,1.36,20.92,2.36,31.34.06,17.88-3.95,29.56-14.49,34.07-32.51A58.32,58.32,0,0,0,1395.21,621.72Z" />
    </clipPath>
  </g>
  <g id="strokes" fill="none" stroke="#1B1D1F" stroke-width="120" stroke-linecap="round" stroke-linejoin="round">
    <path clip-path="url(#clip_l1)" class="path path_l1"
      d="M42.47,663.32s54.7-19.19,92.55-73.9c36.57-66.5,58.78-144.3,60.36-234.55,0-81.95,1.07-238.36-53-304.61" />
    <path clip-path="url(#clip_l2)" class="path path_l2"
      d="M135.35,49.2C94.93,42.12,74.59,166.92,72,209.18,64.79,327.69,73.75,329.64,92.66,413.5c23,63.34,38.38,172.12,59,191.12s68.19,28.62,91.94,28.62,57.55-28.4,80.75-71.26c35.93-66.37,47.51-158.71,47.51-158.71" />
    <path clip-path="url(#clip_o1)" class="path path_o1"
      d="M366.08,449.11,352.82,554.86s4.75,83.13,36.42,108.46,59.06,39.21,120.19,20.11c50.67-15.84,69.83-62.86,69.83-62.86S599.84,557.23,601.42,505s-4.75-69.32-22.16-101.71S545,360,511.44,358.45c-12.15-.57-48.67-4.42-61.95,31" />
    <path clip-path="url(#clip_v1)" class="path path_v1"
      d="M442.85,395c-3.16,33.93,16.06,54.46,39.82,74.32s52.24,21.52,86.61,22.38,54.25,3.76,80.37-14.38,22.15-31.49,47.74-65.46c13.1-17.39,20.24-42.15,60.79-43.48,39.57-1.3,39.59-1.52,57,34.93s20.58,87.46,30.08,135,5.11,74,44.34,82.34c35.87,7.63,38,11.73,68.09-4.75,23.58-12.92,42.47-32.66,45.56-77.91,6.62-96.73-6.72-161-5.27-148.21" />
    <path clip-path="url(#clip_e1)" class="path path_e1"
      d="M1018.94,395.33s43.94,0,106-3.17c61.67-3.15,105.11-14.58,127.3-30s39.51-51,47.43-77.33" />
    <path clip-path="url(#clip_e2)" class="path path_e2"
      d="M1297.59,251.09c-6.41-10.28-19.51-29.39-37.46-37.46-31.67-14.25-63.16-9-102.69,16.29s-37.83,92.79-37.83,92.79,10.61,65.3,29.07,107.07,7.91,66.73,35.45,97.37c30.84,34.3,48.73,60.17,84.07,74.05,30.32,11.91,74.27,24.12,74.27,24.12" />
  </g>
</svg>
body {
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

/* Animate all strokes at the same speed 
gsap.utils.toArray(".path").forEach(path => {
  tl_love.to(path, 0.3, { drawSVG: "100%", ease: Linear.easeNone, stagger: 0.1 })
}); */

/* Animate each stroke at a different speed */
tl_love.to(".path_l1", 0.5, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })
tl_love.to(".path_l2", 0.5, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })
tl_love.to(".path_o1", 0.7, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })
tl_love.to(".path_v1", 0.7, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })
tl_love.to(".path_e1", 0.3, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })
tl_love.to(".path_e2", 0.5, { drawSVG:"100%", ease: Linear.easeNone, stagger: 0.1 })
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