<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.