Handcoded SVG

cubic-asymmetric.svg

<svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>

        <!--
            punktet som settes av S er refleksjonen av 65,10 så
            M X0,Y0 C X1,Y1 X2,Y2 X3,Y3
            M X3,Y3 C XR(X3*2-X2),YR(Y3*2-Y2) X4,Y4 X5,Y5 (M ikke nødvendig – med for lesbarhet)

            er det samme som
            M X0,Y0 C X1,Y1 X2,Y2 X3,Y3
            S X4,Y4 X5,Y5

            Dersom et punkt er asymmetrisk derimot, må plasseringen av XR,YR kalkuleres (se script)
        -->

        <marker id="mCircle" markerWidth="8" markerHeight="8" refX="5" refY="5" orient="auto">
            <circle cx="5" cy="5" r="2" stroke="red" fill="white"/>
        </marker>

        <marker id="mCircleBig" markerWidth="10" markerHeight="10" refX="6" refY="6" orient="auto">
            <circle cx="6" cy="6" r="3" stroke="red" fill="white"/>
        </marker>

        <style>
            svg:hover {
                cursor: crosshair;
            }
            line, polyline {
                stroke: red;
            }
            #line {
                stroke: violet;
            }
        </style>

    </defs>

    <rect width="190" height="160" fill="white"/>

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


    <line x1="10" y1="80" x2="40" y2="10" marker-start="url(#mCircleBig)" marker-end="url(#mCircle)" />

    <polyline points="65,10 95,80 115.14285714285714,127" marker-start="url(#mCircle)" marker-mid="url(#mCircleBig)" marker-end="url(#mCircle)"/>

    <line x1="159.85714285714286" y1="127" x2="180" y2="80" marker-start="url(#mCircle)" marker-end="url(#mCircleBig)"/>

    <g transform="translate(10,137)" display="none">
        <rect x="0" y="0" width="100" height="13" fill="orange" opacity=".5" />
        <text x="2" y="10" font-family="monospace" font-size="10"  id="coordinates">0.000,0.000</text>
    </g>

    <script><![CDATA[

        /* http://stackoverflow.com/questions/21168599/extend-line-with-given-points */

        function pointAtX(x1, y1, x2, y2, x) {
            var slope = (y2 - y1) / (x2 - x1),
                y = y1 + (x - x1) * slope;
            return [x, y];
        }

        function pointAtY(x1, y1, x2, y2, y) {
            var slope = ((x2 - x1) / (y2 - y1));
                x = x1 + (y - y1) * slope;
            return [x, y];
        }

        var svg = document.documentElement;
        var viewBox = svg.viewBox.baseVal;

        var pt = svg.createSVGPoint();

        var coords = document.getElementById('coordinates');

        function cursorPoint(e) {
            pt.x = e.clientX;
            pt.y = e.clientY;
            return pt.matrixTransform(svg.getScreenCTM().inverse());
        }

        function mousemoveHandler(e) {
            var position = cursorPoint(e);
            coords.textContent = position.x.toFixed(3) + ',' + position.y.toFixed(3);
        }

        console.log('new points:', pointAtY(65,10, 95,80, 127));
        console.log('new points:', pointAtY(150,150, 180,80, 127));

        document.documentElement.addEventListener('mousemove', mousemoveHandler)

    ]]></script>

</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