createEaseInOutCurve

createEaseInOutCurve.js

function createEaseInOutCurve(x1, y1, x2, y2) {
    // Start point
    const startX = x1;
    const startY = y1;

    // End point
    const endX = x2;
    const endY = y2;

    // Control points for an "ease in out" curve
    // These control points can be adjusted to change the curve's shape
    const controlX1 = startX + (endX - startX) / 4;
    const controlY1 = startY;
    const controlX2 = startX + 3 * (endX - startX) / 4;
    const controlY2 = endY;

    // Construct the path data string
    const pathData = `M ${startX},${startY} C ${controlX1},${controlY1} ${controlX2},${controlY2} ${endX},${endY}`;

    return pathData;
}

function createEaseInOutCurvePath(startCoord, endCoord) {
  // Extract x and y coordinates
  const startX = startCoord[0];
  const startY = startCoord[1];
  const endX = endCoord[0];
  const endY = endCoord[1];

  // Calculate control points for the cubic bezier curve
  // These control points create a smooth ease-in-out effect
  const controlX1 = startX + (endX - startX) * 1.1; 
  const controlY1 = startY; 
  const controlX2 = endX - (endX - startX) * 1.1; 
  const controlY2 = endY; 

  // Construct the SVG path data string
  const pathData = `M ${startX} ${startY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${endX} ${endY}`;

  return pathData;
}

elpath.setAttribute("d", createEaseInOutCurve(10, 10, 190, 190))
elpath2.setAttribute("d", createEaseInOutCurvePath([190, 190], [10, 10]))
elpath3.setAttribute("d", createEaseInOutCurvePath([10, 10], [100, 100]))
elpath4.setAttribute("d", createEaseInOutCurvePath([10, 10], [50, 190]))