Function generateMergedClipPathSVG

src/tools/shape-magic/svgRenderers.js:268–307

(shapes, bridges, cornerRadii, style, globalRadius, smoothing = 0.6)

};

export const generateMergedClipPathSVG = (shapes, bridges, cornerRadii, style, globalRadius, smoothing = 0.6) => {
  const padding = 10;
  const bb = computeShapesBBox(shapes);
  const width = bb.w + padding * 2;
  const height = bb.h + padding * 2;
  const offsetX = -bb.x + padding;
  const offsetY = -bb.y + padding;

  const allPaths = [];

  shapes.forEach(s => {
    const corners = cornersFor(cornerRadii, s.id, globalRadius);
    allPaths.push(getRoundedRectPath(s.x + offsetX, s.y + offsetY, s.w, s.h, corners));
  });

  bridges.forEach(b => {
    allPaths.push(getBridgePathAt(b.x + offsetX, b.y + offsetY, b.r, b.rotation, smoothing));
  });

  const combinedPath = allPaths.join(' ');
  const fillSpec = getFillSpec(style, { x: padding, y: padding, w: bb.w, h: bb.h }, 'clip');
  const defs = fillDefsString(fillSpec);

  return `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="merged-shape-clip">
      <path d="${combinedPath}" fill-rule="nonzero" />
    </clipPath>
    ${defs}
  </defs>

  <!-- The merged shape - use as mask for images/videos -->
  <path d="${combinedPath}" fill="${fillSpec.paint}" fill-rule="nonzero" />

  <!-- Example: Clipped content container -->
  <!-- <g clip-path="url(#merged-shape-clip)">
    <image href="your-image.jpg" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid slice" />
  </g> -->
</svg>`;
};

export const generateCSSClipPath = (shapes, bridges, cornerRadii, globalRadius, smoothing = 0.6) => {
  const padding = 10;