makeSvgPath = (startPoint, endPoint, options = { type: 'curve' }) => {
  if (!startPoint || !endPoint) return '';
  const roundedStart = roundPoint(startPoint);
  const roundedEnd = roundPoint(endPoint);

  const start = `${roundedStart[0]}, ${roundedStart[1]}`;
  const end = `${roundedEnd[0]}, ${roundedEnd[1]}`;

  if (options.type === 'bezier' && (options.inputAlignment || options.outputAlignment)) {
    let startControl = end;
    let endControl = start;

    if (options.inputAlignment) {
      const offsetX = roundedStart[0] + getXOffset(options.inputAlignment);
      const offsetY = roundedStart[1] + getYOffset(options.inputAlignment);
      endControl = `${offsetX}, ${offsetY}`;
    }

    if (options.outputAlignment) {
      const offsetX = roundedEnd[0] + getXOffset(options.outputAlignment);
      const offsetY = roundedEnd[1] + getYOffset(options.outputAlignment);
      startControl = `${offsetX}, ${offsetY}`;
    }

    return `M ${start} C ${endControl} ${startControl}, ${end}`;
  }

  // connecting with a standard curve without any alignment
  const ctrl = `${roundedEnd[0]}, ${roundedStart[1]}`;

  return `M ${start} Q ${ctrl}, ${end}`;
}
Given a source point and an output point produces the SVG path between them