Testing with SVG and drawing a smooth curve between two points

curve-between-points.jsx

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const start = { x: 200, y: 0 };
  const stop = { x: 0, y: 100 };

  // Mutations
  const sumX = start.x - stop.x
  const sumY = start.y + stop.y

  // SVG draw
  const M = `M ${start.x} ${start.y}`
  const C = `C ${start.x} ${start.y + (sumY / 2)} ${sumX / 2} ${sumY / 2} ${sumX / 2} ${sumY / 2}`
  const S = `S ${stop.x} ${sumY / 2} ${stop.x} ${stop.y}`

  return (
    <div className="App">
      <svg height="400" width="400">
        <path
          d={`${M} ${C} ${S}`}
          stroke="green"
          stroke-width="3"
          fill="none"
        />
      </svg>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);