The sides of an svg wave box

wave-box-sides.txs

const calculateTop = useCallback(
    point => {
      const xyPoint = {
        x: paddingOffset + point,
        y: paddingOffset - pathFunction(point)
      };
      return ["L", xyPoint.x, xyPoint.y].join(" ");
    },
    [paddingOffset, pathFunction]
  );

  const calculateRight = useCallback(
    point => {
      const xyPoint = {
        x: paddingOffset + totalPoints * 0.25 + pathFunction(point),
        y: paddingOffset + (point - totalPoints * 0.25)
      };
      return ["L", xyPoint.x, xyPoint.y].join(" ");
    },
    [paddingOffset, pathFunction, totalPoints]
  );

  const calculateBottom = useCallback(
    point => {
      const xyPoint = {
        x: paddingOffset + totalPoints * 0.25 - (point - totalPoints / 2),
        y: paddingOffset + totalPoints * 0.25 + pathFunction(point)
      };
      return ["L", xyPoint.x, xyPoint.y].join(" ");
    },
    [paddingOffset, pathFunction, totalPoints]
  );

  const calculateLeft = useCallback(
    point => {
      const xyPoint = {
        x: -pathFunction(point) + paddingOffset,
        y: totalPoints * 0.25 - (point - totalPoints * 0.75) + paddingOffset
      };
      return ["L", xyPoint.x, xyPoint.y].join(" ");
    },
    [paddingOffset, pathFunction, totalPoints]
  );