Clip Path Generator

A powerful VS Code extension to visually generate CSS clip-path shapes using presets, sliders, and draggable Figma-style points.

✨ Features

• 🎯 Preset shapes (triangle, square, hexagon, star, etc.)
• 🎛️ Custom polygon editor using sliders
• 🖱️ Drag-and-drop points (Figma-style interaction)
• 🌊 Smooth curved edges support
• ⚡ Live preview updates
• 📋 One-click CSS copy
• 🎨 Modern dark UI

🚀 How to Use

1. Open Command Palette:

Ctrl + Shift + P

1. Run:

Open Clip Path Generator

1. Select:

• Shape preset OR custom polygon
• Adjust sliders OR drag points
• Enable curved edges (optional)

1. Click:

Copy CSS

🧠 Use Cases

• UI/Frontend design
• CSS experimentation
• Landing page shapes
• SVG-style layout design
• Learning clip-path concepts

📦 Installation (Dev)

git clone your-repo
npm install
code .

Press F5 to run extension in dev mode.

🛠 Commands
Command	Description
Clip Path Generator: Open	Opens the editor