<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.