3D Bezier Curve

by Naoki Wada

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<div id="container"></div>
<div>
    <form>
        <div>
            <label>
                M-X 開始位置:
                <input id="start_m_x" type="range" min="0" max="640" value="0" step="10">
                <input id="show_start_m_x" type="text" readonly tabindex="-1" value="0">
            </label>
            <label>
                M-Y 開始位置:
                <input id="start_m_y" type="range" min="0" max="480" value="0" step="10">
                <input id="show_start_m_y" type="text" readonly tabindex="-1" value="0">
            </label>
        </div>

        <div>
            <label>
                C-X1 位置:
                <input id="c_x1" type="range" min="0" max="640" value="20" step="10">
                <input type="text" id="show_c_x1" readonly tabindex="-1" value="20">
            </label>
            <label>
                C-Y1 位置:
                <input id="c_y1" type="range" min="0" max="480" value="460" step="10">
                <input type="text" id="show_c_y1" readonly tabindex="-1" value="460">
            </label>
        </div>

        <div>
            <label>
                C-X2 位置:
                <input id="c_x2" type="range" min="0" max="640" value="620" step="10">
                <input type="text" id="show_c_x2" readonly tabindex="-1" value="620">
            </label>
            <label>
                C-Y2 位置:
                <input id="c_y2" type="range" min="0" max="480" value="20" step="10">
                <input type="text" id="show_c_y2" readonly tabindex="-1" value="20">
            </label>
        </div>

        <div>
            <label>
                C-X:
                <input id="c_x" type="range" min="0" max="640" value="640" step="10">
                <input type="text" id="show_c_x" readonly tabindex="-1" value="640">
            </label>
            <label>
                C-Y:
                <input id="c_y"...

Babel + JSX

const paper = Snap(640, 480).remove();
paper.node.style.backgroundColor = 'burlywood';

const path = paper.path('M0,0 C20,460 620,20 640,480').attr({strokeWidth: 1, stroke: 'black', fill: 'none'});
paper.path('M320,0V480 M0,240H640').attr({strokeWidth: 1, stroke: 'black'});

const container = document.querySelector('#container');
paper.prependTo(container);

const dom1 = document.getElementById('start_m_x');
const dom2 = document.getElementById('start_m_y');
const dom3 = document.getElementById('c_x1');
const dom4 = document.getElementById('c_y1');
const dom5 = document.getElementById('c_x2');
const dom6 = document.getElementById('c_y2');
const dom7 = document.getElementById('c_x');
const dom8 = document.getElementById('c_y');

const showDom1 = document.getElementById('show_start_m_x');
const showDom2 = document.getElementById('show_start_m_y');
const showDom3 = document.getElementById('show_c_x1');
const showDom4 = document.getElementById('show_c_y1');
const showDom5 = document.getElementById('show_c_x2');
const showDom6 = document.getElementById('show_c_y2');
const showDom7 = document.getElementById('show_c_x');
const showDom8 = document.getElementById('show_c_y');

const func = function () {
  const pathValue = `M${dom1.value},${dom2.value} C${dom3.value},${dom4.value} ${dom5.value},${dom6.value} ${dom7.value},${dom8.value}`;
  path.node.setAttribute('d', pathValue);
  showDom1.value = dom1.value;
  showDom2.value = dom2.value;
  showDom3.value = dom3.value;
  showDom4.value = dom4.value;
  showDom5.value = dom5.value;
  showDom6.value = dom6.value;
  showDom7.value = dom7.value;
  showDom8.value = dom8.value;
};
dom1.addEventListener('change', func);
dom2.addEventListener('change', func);
dom3.addEventListener('change', func);
dom4.addEventListener('change', func);
dom5.addEventListener('change', func);
dom6.addEventListener('change', func);
dom7.addEventListener('change', func);
dom8.addEventListener('change', func);