How to draw a path properly?

[aeeh]

Hello guys,
I want to try a path, actual my stuff is looking like this:
html stuff:
<svg id="svg">
<clipPath id="apfel">
<path d="M 1,1
C 110,55 195,60, 265,55
C 290,55 290,85 265,85
C 195,85 110,85 40,100
C 0,100 0,50 40,50
Z"/>
</clipPath>
<path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#apfel)"/>
</svg>
css stuff:
.pen {
stroke-dasharray: 280 280;
stroke-dashoffset: 280;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}

@keyframes draw {
from {
stroke-dashoffset: 280;
}

to {
stroke-dashoffset: 0;
}
}

But how do i draw a line like this ?

https://files.facepunch.com/forum/upload/145200/905b9f03-cbc8-474d-9bdf-884eca76e73e/grafik.png

Greetings,
Aeh

[Crazy Knife]

I don't know if you've figured it out, but there's an tutorial and interactive code showing you how to do this here: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74

Here's the code for smoothing your path out: Svg path bezier curves