Function getBridgePathAt

src/tools/shape-magic/svgRenderers.js:24–63

(x, y, r, rotation = 0, smoothing = 0.6)

// user space as the shape paths -- otherwise a userSpaceOnUse gradient would be
// sampled in each bridge's translated local space and render the wrong color.
export const getBridgePathAt = (x, y, r, rotation = 0, smoothing = 0.6) => {
  const s = Math.max(0, Math.min(1, smoothing));
  const k1 = 0.45 + 0.5 * s;
  const k2 = 0.05 + 0.25 * s;

  let c1y, c2x, c2y, ex, ey;
  switch (rotation) {
    case 90:
      c1y = r * k1;
      c2x = -r * k2;
      c2y = r;
      ex = -r;
      ey = r;
      break;
    case 180:
      c1y = -r * k1;
      c2x = -r * k2;
      c2y = -r;
      ex = -r;
      ey = -r;
      break;
    case 270:
      c1y = -r * k1;
      c2x = r * k2;
      c2y = -r;
      ex = r;
      ey = -r;
      break;
    case 0:
    default:
      c1y = r * k1;
      c2x = r * k2;
      c2y = r;
      ex = r;
      ey = r;
      break;
  }

  return `M ${x} ${y} C ${x} ${y + c1y} ${x + c2x} ${y + c2y} ${x + ex} ${y + ey} H ${x} Z`;
};

export const getRoundedRectPath = (x, y, w, h, corners) => {
  const { tl, tr, br, bl } = corners;