infinity-curve.jsx

const App = () => {
  const points = symmetricalCurvePoints({
    controlX: 10,
    endpointX: 35,
    endpointDistance: 15,
    controlDistance: 35
  })
  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>
  );
};