<style>
#clover {
	fill: none;
	stroke: green;
	stroke-width: 2;
	stroke-dasharray: 1478;
	animation: draw 10s linear forwards;
}
@keyframes draw {
	from { stroke-dashoffset: 1478; }
	to { stroke-dashoffset: 0; }
}
@keyframes erase {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: 1478; }
}
</style>

<svg width="400" height="400" fill="none">
	<line x1="0" y1="50%" x2="100%" y2="50%" stroke="silver" />
	<line x1="50%" y1="0" x2="50%" y2="100%" stroke="silver" />
	<path id="clover" d="M200 200 C50 0,350 0,200 200 C50 400,350 400,200 200 C0 50,0 350,200 200 C400 50,400 350,200 200" />
</svg>

<script>
var drawing = true;
clover.onanimationend = () => {
	setTimeout (() => {
		clover.style.animationName = ['draw','erase'][+drawing];
		drawing = !drawing;
	}, 2000);
};
</script>