二次曲線とスプライン曲線は・・・数学ですね。

こんなとき、もっと数学をやっておけばよかったとひしひしと感じます。

でも二次曲線を理解してなくても大丈夫！

私もよくわかってません！！

では、得意のビジュアルで！！！

だって、絵をかくんだもん！！！！


どちらもハンドル操作ではなく、自動で引かれる曲線です。
自由に動かすには不向きかも?
図形や、アニメーションの軌道を書いたりには便利そうです。


それでは！！


Q・q ：二次曲線

＜path class="cls-1" d="M50,100q35-35,70,0,35,40,70,0c0-40-40-60-70-60S50,70,50,100Z"/＞

1 ：ハンドルの頂点。
2 ：次点。

の 2点でセグメントを描画します。
ハンドルはアンカーから頂点までの距離の 2/3 の長さです。


＜path class="cls-1" d="

M50,100




q35-35,70,0,






35,35,70,0






c0-40-40-60-70-60








S50,70,50,100Z





"/＞


書き方のバリエーション

相対座標
＜path class="cls-1" d="M50,100q35-35,70,0,35,35,70,0c0-40-40-60-70-60s-70,30-70,60Z"/＞

絶対座標
＜path class="cls-1" d="M50,100Q85,65,120,100,155,135,190,100C190,60,150,40,120,40,S50,70,50,100Z"/＞

最終セグメントが絶対座標
＜path class="cls-1" d="M50,100q35-35,70,0,35,35,70,0c0-40-40-60-70-60S50,70,50,100Z"/＞


頂点と距離を記述すればいいので、波線を簡単に描画することができます。

罫線に利用できますね。
html に直接書いちゃえばいいんだもんね！





二次曲線は美しいです！！

関連記事

• svg で描いちゃう！書き方おぼえがき vol.07 【 スプライン曲線 T・t 】
• svg で描いちゃう！書き方おぼえがき vol.06 【 二次曲線 Q・q 】
• svg で描いちゃう！書き方おぼえがき vol.05 【 円弧 A・a 】