<svg class="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="300px" viewBox="0 0 1310 680">
	<path
		d="M53,234c143.452,-81.953,313.407,-167.554,430,-107c116.592,45.554,70.404,361.126,236,472c235.595,95.873,447.977,-197.535,477,-306"
		style="stroke:red;fill:none;stroke-width:5px;" />
</svg>

.doc {
	background: #222;
}

.svg {
	margin: auto;
	display: block;
	width: 500px;
	height: 300px;
	max-height: 100vh;
	max-width: 100%;
}

anime({
	targets: ".svg path",
	duration: 1000,
	strokeDashoffset: [anime.setDashoffset, 0],
	easing: "easeInOutSine",
	direction: "alternate",
	delay: anime.stagger(200),
	d: [
		{
			value:
				"M53,234c143.452,-81.953,313.407,-167.554,430,-107c116.592,45.554,70.404,361.126,236,472c235.595,95.873,447.977,-197.535,477,-306"
		},
		{
			value:
				"M53,434c143.452,181.953,213.407,267.554,330,107c56.592,-125.554,70.404,-161.126,236,-172c235.595,-55.873,447.977,-197.535,500,206"
		}
	],
	loop: true
});