Handcoded SVG

cubic-asymmetric.svg

cubic.md

View source to understand how the path is drawn. Short version: M moves the point to the starting position, C is followed by two control-points and then the final point of that curve, S reflects the previous point – illustrated with the grey dotted line. Spaces and commas does not seem to have a function other than to make it more readable.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

<path d="M 10 80  C 40 10, 65 10, 95 80  S 150 150, 180 80" stroke="black" fill="transparent"/>

cubic.svg

quadratic.md

Quadratic beziers are much simpler, and only have three points: Start, control, and end-point. When a T follows a Q, the whole curve is reflected, so only the last endpoint is needed.

<path d="M 10 80  Q 52.5 10, 95 80  T 180 80" stroke="black" fill="transparent"/>

quadratic.svg