<svg id="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.43 311.23"><defs><style>.cls-1{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style></defs><title>heart</title><path class="cls-1" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-163.24 -86.84)"/></svg>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}

svg {
  width: 100%;
  max-width: 400px;
  padding: 150px;
  overflow: visible;
  
}

.cls-1{
       stroke-width: 3px;
       stroke-dasharray: 1200;
       stroke-dashoffset: 1200;
       animation: draw 3s linear forwards infinite;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.