CSS Clip-Path जनरेटर - विज़ुअली आकार बनाएं ऑनलाइन

// CSS Clip-Path Generator - JavaScript Implementation

// Generate polygon clip-path from an array of [x, y] coordinate pairs
function generatePolygonClipPath(points) {
  const coords = points
    .map(([x, y]) => `${x}% ${y}%`)
    .join(', ');
  return `clip-path: polygon(${coords});`;
}

// Generate circle clip-path
function generateCircleClipPath(radius, centerX = 50, centerY = 50) {
  return `clip-path: circle(${radius}% at ${centerX}% ${centerY}%);`;
}

// Generate ellipse clip-path
function generateEllipseClipPath(radiusX, radiusY, centerX = 50, centerY = 50) {
  return `clip-path: ellipse(${radiusX}% ${radiusY}% at ${centerX}% ${centerY}%);`;
}

// Generate inset clip-path with optional border-radius
function generateInsetClipPath(top, right, bottom, left, borderRadius = 0) {
  const inset = `${top}% ${right}% ${bottom}% ${left}%`;
  if (borderRadius > 0) {
    return `clip-path: inset(${inset} round ${borderRadius}%);`;
  }
  return `clip-path: inset(${inset});`;
}

// Common preset shapes
const PRESETS = {
  triangle: [[50, 0], [100, 100], [0, 100]],
  diamond: [[50, 0], [100, 50], [50, 100], [0, 50]],
  hexagon: [[25, 0], [75, 0], [100, 50], [75, 100], [25, 100], [0, 50]],
  star: [[50, 0], [61, 35], [98, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [2, 35], [39, 35]],
};

// Usage
console.log(generatePolygonClipPath(PRESETS.triangle));
// clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

console.log(generateCircleClipPath(40, 50, 50));
// clip-path: circle(40% at 50% 50%);

console.log(generateInsetClipPath(5, 10, 5, 10, 15));
// clip-path: inset(5% 10% 5% 10% round 15%);