Technical Specification: SVG Cubic Bezier Curve Visual Editor

Project Overview

This application is a professional-grade, single-file utility that allows users to visually manipulate Cubic Bezier curves and generate the corresponding SVG path commands (C and S). The tool focuses on precision, immediate visual feedback, and ease of export.

Core Feature Set

1. Interactive Vector Canvas

• Draggable Handles:
  • Anchor Points: Start (P0) and End (P3) points of the curve.
  • Control Points: Two draggable handles (P1 and P2) that define the curve's curvature.
• Visual Guides: Thin, dashed lines connecting the anchor points to their respective control points to visualize the tangent vectors.
• Snap-to-Grid: An optional toggle to snap points to a 10px or 50px grid for mathematical precision.
• Coordinate Display: Real-time X/Y coordinate labels following each handle as it is dragged.

2. Command Logic & Mode Switching

• C-Command Mode (Cubic): Full control over both control points (standard cubic Bezier).
• S-Command Mode (Smooth): A toggle that simulates the S command behavior, where the first control point is locked as a reflection of the previous segment's second control point (simulated for a single segment by mirroring across the start point).
• Absolute vs. Relative: A toggle to switch the generated code between absolute coordinates (uppercase C, S) and relative coordinates (lowercase c, s).

3. Real-time Code Generator

• Live Path String: A read-only text area that updates instantly as points are moved (e.g., M 10 80 C 40 10, 65 10, 95 80).
• Copy to Clipboard: A one-click button to copy the final path string.
• Full SVG Export: A button to generate a complete <svg> wrapper around the path for immediate use.

4. Numeric Precision Panel

• Manual Input: Input fields for each point's X and Y coordinates for users who prefer typing over dragging.
• Coordinate Sync: Changes in the numeric inputs immediately update the visual position on the canvas.

UI Layout

Header

• Title: "SVG Cubic Bezier Curve Editor"
• Subtitle: "Visually design Bezier paths and generate optimized SVG code."

Main Workspace (Two-Column Layout)

• Left Column (Canvas Area - 70% width):
  • A large, white workspace with a subtle light-grey grid background.
  • The interactive SVG canvas centered within this area.
  • Tooltip indicators for points (e.g., "Start Point", "Control Point 1").
• Right Column (Control Panel - 30% width):
  • Coordinate Group: Four sets of X/Y inputs (Start, CP1, CP2, End).
  • Mode Toggles:
    • Switch: [Cubic (C) / Smooth (S)]
    • Switch: [Absolute / Relative]
  • Code Block: A styled code area showing the generated path string.
  • Action Buttons: "Copy Path", "Export Full SVG".

Design Aesthetic

• Color Palette:
  • Background: #F9FAFB (Light gray/blue tint).
  • Canvas: #FFFFFF (Pure white).
  • Primary Accent: #3B82F6 (Bright Blue) for anchor points and buttons.
  • Secondary Accent: #10B981 (Emerald Green) for the Bezier curve line.
  • Control Handles: #EF4444 (Red) for control points to distinguish them from anchors.
  • Text: #1F2937 (Dark Charcoal) for readability.
• Styling:
  • Modern SaaS look using Tailwind CSS.
  • Rounded corners (rounded-xl) on all panels.
  • Soft box-shadows (shadow-sm) to create depth.
  • High-contrast borders (border-gray-200).

Technical Constraints & Implementation

• Architecture: Single HTML file containing all CSS (via Tailwind CDN) and Vanilla JavaScript.
• State Management: Use a simple JavaScript object to store the coordinates of the four points. All UI elements must be bound to this state object.
• Iframe Compatibility:
  • No Storage: No localStorage or sessionStorage. All state is kept in memory. If the page refreshes, state resets to default.
  • No Popups: Use a custom HTML div for "Copied!" notifications instead of alert().
  • Sandboxing: No external network requests other than the initial CDN loads for Tailwind and fonts.
• Interactivity: Implement mouse/touch events (mousedown, mousemove, mouseup) to handle the dragging of SVG elements.
• Responsiveness: The layout should stack vertically on mobile devices, with the control panel moving below the canvas.

Animations & Micro-interactions

• Handle Hover: Control points should slightly scale up on hover to indicate interactivity.
• Smooth Transitions: Use transition-all duration-200 for button hovers and panel toggles.
• Path Interpolation: The curve must redraw instantly (60fps) as handles are dragged.