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