SVGで双曲線を書きたい

Question

###実現したいこと
svgで双曲線を書きたいです。しかし、双曲線はそもそも関数ではないので無理かなと思い始めています。わらにすがるような思いで質問します。
##やってみたこと
放物線は2次関数なのでベジェ曲線で定義可能です。両端の接線を導関数で導き、その交点を制御点として設定すれば、簡単に作成可能です。
しかし双曲線となると円の方程式に近いようなもので関数ではないので、今までのやり方だとどうしても放物線のような曲線になってしまいます。
今までのやりかたで作ったsvgがこちらです。webで表示してみてください。

<svg height="200" viewBox="0 0 100 100" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <marker viewBox="-10 -5 10 10" markerWidth="5" markerHeight="5" id="mk" refX="0" refY="0" orient="auto">
                <polyline points="-10,3 0,0 -10,-3" stroke="gray" fill="none" stroke-width="2"></polyline>
            </marker>
            <line x1="2" y1="50" x2="98" y2="50" stroke="gray" marker-end="url(#mk)"></line><!--x軸-->
            <line x1="50" y1="98" x2="50" y2="2" stroke="gray" marker-end="url(#mk)"></line><!--y軸-->
            <line x1="5" y1="15" x2="95" y2="85" stroke="gray"></line><!--漸近線-->
            <line x1="5" y1="85" x2="95" y2="15" stroke="gray"></line><!--漸近線-->
            <path d="M 95,22 Q 66,50 95,78" stroke="steelblue" fill="none"></path>
            <path d="M 5,22 Q 34,50 5,78" stroke="steelblue" fill="none"></path>
            <circle cx="84" cy="50" r="2" fill="gray"></circle>
            <circle cx="16" cy="50" r="2" fill="gray"></circle>
            <polygon points="77,29 77,71 23,71 23,29" stroke="gray" fill="none" stroke-dasharray="4 1"></polygon>
            <text font-size="10" x="93" y="58" fill="gray" font-style="italic">x</text>
            <text font-size="10" x="43" y="8" fill="gray" font-style="italic">y</text>
            <text font-size="10" x="42" y="61" fill="gray">O</text>
        </svg>

四角い枠に接するはずなのですが、やはり関数ではないので接しません。
ちなみに制御点を変更して、接するようにしたのがこちらです。

<svg height="200" viewBox="0 0 100 100" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <marker viewBox="-10 -5 10 10" markerWidth="5" markerHeight="5" id="mk" refX="0" refY="0" orient="auto">
                <polyline points="-10,3 0,0 -10,-3" stroke="gray" fill="none" stroke-width="2"></polyline>
            </marker>
            <line x1="2" y1="50" x2="98" y2="50" stroke="gray" marker-end="url(#mk)"></line><!--x軸-->
            <line x1="50" y1="98" x2="50" y2="2" stroke="gray" marker-end="url(#mk)"></line><!--y軸-->
            <line x1="5" y1="15" x2="95" y2="85" stroke="gray"></line><!--漸近線-->
            <line x1="5" y1="85" x2="95" y2="15" stroke="gray"></line><!--漸近線-->
            <path d="M 95,22 Q 59,50 95,78" stroke="steelblue" fill="none"></path>
            <path d="M 5,22 Q 41,50 5,78" stroke="steelblue" fill="none"></path>
            <circle cx="84" cy="50" r="2" fill="gray"></circle>
            <circle cx="16" cy="50" r="2" fill="gray"></circle>
            <polygon points="77,29 77,71 23,71 23,29" stroke="gray" fill="none" stroke-dasharray="4 1"></polygon>
            <text font-size="10" x="93" y="58" fill="gray" font-style="italic">x</text>
            <text font-size="10" x="43" y="8" fill="gray" font-style="italic">y</text>
            <text font-size="10" x="42" y="61" fill="gray">O</text>
        </svg>

厳密な曲線じゃないけど、方法がなかったらこっちでいいかなと思っています。
もし方法があれば教えてください。できればSVGで解決したいと思っています。
しかし、JSでもできるのであれば、それも教えていただけると助かります。
サインカーブもできれば実現したいです。

Comments

[ikadzuchi]

> 放物線は2次関数なのでベジェ曲線で定義可能です。
そんなことはありません。ベジエ曲線と放物線は別物です。
どのような曲線も近似的にしか再現できません。

[suzunox]

僕も最初はそう思っていましたが、そうではないようです。
wikipediaによると、n個の制御点でn-1次式の関数の曲線を作ることができると書かれています。
実際僕もdesmosを使って本当にそうなるか実験してみました。これがそのurlです。
https://www.desmos.com/calculator/8tqmfxlpic
紫の点がベジェ曲線の軌跡ですが、放物線に常に接していることがわかると思います。(高1の時に実験したものなのでかなりお粗末ですが)

[suzunox]

https://postd.cc/bezier-curves/
ここにベジェ曲線のことについてわかりやすく書いているので参考にしてください。
このページを参考にして紫の点の軌跡をプログラムしました。

[ikadzuchi]

すみません、「2次関数」と「2次方程式」や「2次曲線」を混同し、放物線以外にも2次関数があると勘違いしていました。
確かに放物線はベジエ曲線で表せそうです。申し訳ありませんでした。

Answer 1

javascriptで1ずつの座標を計算してsvgに代入したらとてもいい感じになりました。
下のコードをまるまるそのまま.htmlで保存してみると二つの違いがわかるとおもいます。
上が２次関数、下が双曲線です。

<svg height="200" viewBox="0 0 100 100" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <marker viewBox="-10 -5 10 10" markerWidth="5" markerHeight="5" id="mk" refX="0" refY="0" orient="auto">
        <polyline points="-10,3 0,0 -10,-3" stroke="gray" fill="none" stroke-width="2"></polyline>
    </marker>
    <line x1="2" y1="50" x2="98" y2="50" stroke="gray" marker-end="url(#mk)"></line><!--x軸-->
    <line x1="50" y1="98" x2="50" y2="2" stroke="gray" marker-end="url(#mk)"></line><!--y軸-->
    <line x1="5" y1="15" x2="95" y2="85" stroke="gray"></line><!--漸近線-->
    <line x1="5" y1="85" x2="95" y2="15" stroke="gray"></line><!--漸近線-->
    <path d="M 95,22 Q 66,50 95,78" stroke="steelblue" fill="none"></path>
    <path d="M 5,22 Q 34,50 5,78" stroke="steelblue" fill="none"></path>
    <circle cx="84" cy="50" r="2" fill="gray"></circle>
    <circle cx="16" cy="50" r="2" fill="gray"></circle>
    <polygon points="80,27 80,73 20,73 20,27" stroke="gray" fill="none" stroke-dasharray="4 1"></polygon>
    <text font-size="10" x="93" y="58" fill="gray" font-style="italic">x</text>
    <text font-size="10" x="43" y="8" fill="gray" font-style="italic">y</text>
    <text font-size="10" x="42" y="61" fill="gray">O</text>
</svg>
<div id="svgjs"></div>
<script>
    let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute('width', '200');
    svg.setAttribute('height', '200');
    svg.setAttribute('viewBox', '0 0 100 100');
    let root;
    let plus = '<path d="M 96,23 L';
    let minus = '<path d="M 4,23 L';

    for(var i = 24; i <= 77; i++) {
        root = 9 * Math.sqrt((Math.pow(((3 * i / 10) - 15), 2) / 49) + 1);
        plus += ' ' + String(Math.round((root + 15) * 100 / 3) / 10) + ',' + String(i);
        minus += ' ' + String(Math.round((15 - root) * 100 / 3) / 10) + ',' + String(i);
    }
    console.log(root);
    console.log(minus);
    plus += '" stroke="steelblue" fill="none">';
    minus += '" stroke="steelblue" fill="none">';
    svg.innerHTML = '<marker viewBox="-10 -5 10 10" markerWidth="5" markerHeight="5" id="mk" refX="0" refY="0" orient="auto">'
                  +     '<polyline points="-10,3 0,0 -10,-3" stroke="gray" fill="none" stroke-width="2"></polyline>'
                  + '</marker>'
                  + '<line x1="2" y1="50" x2="98" y2="50" stroke="gray" marker-end="url(#mk)"></line>'
                  + '<line x1="50" y1="98" x2="50" y2="2" stroke="gray" marker-end="url(#mk)"></line>'
                  + '<line x1="5" y1="15" x2="95" y2="85" stroke="gray"></line>'
                  + '<line x1="5" y1="85" x2="95" y2="15" stroke="gray"></line>'
                  + '<circle cx="84" cy="50" r="2" fill="gray"></circle>'
                  + '<circle cx="16" cy="50" r="2" fill="gray"></circle>'
                  + '<polygon points="80,27 80,73 20,73 20,27" stroke="gray" fill="none" stroke-dasharray="4 1"></polygon>'
                  + '<text font-size="10" x="93" y="58" fill="gray" font-style="italic">x</text>'
                  + '<text font-size="10" x="43" y="8" fill="gray" font-style="italic">y</text>'
                  + '<text font-size="10" x="42" y="61" fill="gray">O</text>'
                  + '<g id="plus"></g>'
                  + '<g id="minus"></g>';
    svg.getElementById('plus').innerHTML = plus;
    svg.getElementById('minus').innerHTML = minus;
    document.getElementById('svgjs').appendChild(svg);
</script>