Technical Specification: Free Online CSS Clip-Path Visual Editor

Overview

A high-performance, browser-based visual editor designed for web developers and designers to generate clip-path CSS rules via a drag-and-drop interface. The app provides a live preview of how the mask interacts with both solid colors and sample images.

Core Features

• Drag-and-Drop Polygon Editor: Interactive canvas where users can add, remove, and drag anchor points to create custom shapes.
• Real-time CSS Output: Instant code generation as the user manipulates points. Includes a 'Copy to Clipboard' button with visual feedback.
• Image Overlay Support: Allow users to upload a local image to preview the mask over their specific content (processed in-memory, no server upload).
• Preset Shapes: A library of common shapes (triangle, hexagon, star, pentagon) to serve as a starting point.
• Responsive Scaling: Automatically adjust the coordinate system between pixels and percentages to ensure responsive web design compatibility.

UI Layout

• Header: Clean, minimalist title with a short description of the tool.
• Main Tool Area:
  • Sidebar (Left): Contains controls for adding/resetting points, toggling background images, and selecting shape presets.
  • Canvas (Center): The primary working area. A responsive container with a grid background for precision.
  • Code Output (Bottom): A highlighted, read-only code block displaying the current clip-path: polygon(...) CSS rule.

Visual Design & Aesthetics

• Color Palette:
  • Background: #F9FAFB (Off-white)
  • Surface/Card: #FFFFFF (Pure white)
  • Primary Accent: #3B82F6 (Modern Vibrant Blue)
  • Text: #1F2937 (Dark Slate Gray)
  • Border: #E5E7EB (Subtle Light Gray)
• Interaction Design:
  • Points use smooth transitions (transition: transform 0.2s ease).
  • Buttons feature subtle box-shadows and hover-state lift animations.
  • No distracting modals; uses inline notification toasts for 'Code Copied'.

Developer Implementation Directives

• Architecture: Must be a single HTML file. CSS in <style> block, JavaScript in <script> block.
• Sandbox Safety:
  • NO STORAGE: Do not attempt to save user data via localStorage or IndexedDB. Use an array variable clipPoints in memory.
  • NO POPUPS: Use custom floating <div> elements for messages instead of alert().
  • Performance: Use requestAnimationFrame for smooth canvas interactions during mouse drag events.
• Dependency Management: Use CDN links for any icons (e.g., Lucide or FontAwesome) and CSS resets (e.g., Tailwind via CDN for utility classes).
• Responsive Design: Ensure the canvas container wraps properly on mobile; points should be draggable on touch-enabled devices using Pointer Events (touch/mouse compatible).