<svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
    <circle id="c" fill="none" stroke-width="4" stroke-linecap="round" stroke="red" cx="45" cy="45" r="43" />
  </svg>
svg {
  stroke-dasharray: 269.7405090332031px;
  stroke-dashoffset: 0;
  animation: heartBeat 10s linear reverse infinite;
  transform: rotate(-90deg);
}

@keyframes heartBeat {
  50% {
    stroke-dashoffset: 269.7405090332031px;
  }
  50.01% {
    stroke-dashoffset: -269.7405090332031px;
  }
}
View Compiled 
const path = document.getElementById('c')


console.log({p: path.getTotalLength()})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.