Project 23: SVG Path Editor

📋 Project Brief

Build a visual SVG path editor for creating and manipulating vector graphics. Users manipulate Bezier curve control points, simplify paths, adjust the viewBox, and export the result as CSS clip-path or offset-path values.

✅ Feature Requirements

Feature 1: Bezier Curve Handles

Acceptance Criteria:

• SVG paths are rendered with visible anchor points and control handles
• Dragging an anchor point moves the path vertex
• Dragging a control handle adjusts the curve's curvature
• Support for cubic (C) and quadratic (Q) Bezier curves
• New points can be added by clicking on the canvas
• Points can be deleted with a right-click context menu or Delete key

Feature 2: Path Simplification

Acceptance Criteria:

• A "Simplify" slider reduces the number of nodes in a path
• Uses the Ramer-Douglas-Peucker algorithm (or similar)
• A tolerance slider controls how aggressively nodes are removed
• The path visually updates in real-time as the slider moves
• Show node count before/after: "Simplified from 42 to 12 nodes"

Feature 3: ViewBox Control

Acceptance Criteria:

• Controls to adjust the SVG viewBox: x, y, width, height
• A visual representation of the viewBox boundaries on the canvas
• Zoom in/out with scroll wheel or +/- buttons
• Pan by dragging the canvas background
• A "Fit to Content" button auto-adjusts the viewBox to contain all paths

Feature 4: Export to CSS

Acceptance Criteria:

• Export the path as a CSS clip-path: path("...") value
• Export as clip-path: polygon(...) for simpler shapes
• Export as raw SVG <path d="...">
• "Copy to Clipboard" button with visual confirmation for each export format

Feature 5: Layer System

Acceptance Criteria:

• Support multiple paths on the same canvas
• A layers panel lists all paths; clicking selects one for editing
• Layers can be reordered by dragging
• Layers can be hidden/shown (visibility toggle)
• Each layer has a color identifier

📊 SVG Path Command Reference

Command	Meaning	Example
M	Move to	M 10 20
L	Line to	L 50 60
C	Cubic Bezier	C 10 20, 30 40, 50 60
Q	Quadratic Bezier	Q 10 20, 50 60
Z	Close path	Z

🧪 Testing Checklist

• Unit test path simplification algorithm
• Unit test SVG path string generation from point data
• Unit test CSS clip-path and polygon export formatting
• Integration test: adding/moving points updates the SVG preview and code output
• A11y: all controls keyboard-accessible; drag operations have keyboard alternatives

🚀 Stretch Goals

• Import existing SVG files for editing
• Add a "Draw Freehand" mode that auto-generates path points
• Implement path boolean operations (union, intersect, subtract)
• Add animation preview (animate along path using offset-path)