infinity-curve-first-attempt.jsx

const Guide = ({ start, end }) => {
  return [
    <circle fill="gray" opacity={0.5} cx={start[0]} cy={start[1]} r={1} />,
    <path
      stroke="gray"
      strokeWidth="1"
      strokeOpacity={0.5}
      fill="transparent"
      d={line(start, end)}
    />,
    <circle fill="gray" opacity={0.5} cx={end[0]} cy={end[1]} r={1} />
  ];
};

const App = () => {
  const points = [
    [30, 30],
    [10, 40],
    [10, 60],
    [30, 70]
  ]
  return (
    <div>
      <svg
        viewBox="0 0 100 100"
        style={{ border: "1px solid lightgray", width: "80vw" }}
      >
        <Guide start={points[0]} end={points[1]} />
        <Guide start={points[2]} end={points[3]} />      
        <path
          strokeWidth="1"
          stroke="blue"
          strokeOpacity={0.5}
          fill="transparent"
          d={curve(...points)}
        />
      </svg>
    </div>
  );
};