Technical Specification: Online Venn Diagram SVG Generator

Overview

A clean, professional, single-file browser application that allows users to generate, customize, and export high-quality Venn diagrams using SVG technology. The application focuses on intuitive controls, real-time preview, and instant SVG downloading.

Core Features

• Dynamic Circle Management: Add, remove, and resize 2 to 4 circles.
• Customizable Labels: Edit text for each circle and the intersection areas.
• Visual Styling: Color pickers for individual circles and transparency/opacity control for overlapping sections.
• Real-time Canvas: An interactive SVG preview area that updates instantly as settings change.
• Export to SVG: A clean "Download SVG" button that triggers a browser download without server interaction.

UI Layout

• Header: Contains the tool name and a brief instruction on usage.
• Main Tool Area (Split-pane layout):
  • Left Panel (Settings): Stacked cards containing inputs for labels, circle color/opacity, and layout alignment.
  • Right Panel (Preview): A centered, responsive canvas containing the SVG drawing area.
• Action Bar: Fixed button group at the bottom for "Reset Diagram" and "Download SVG".

Design System (Light Mode Only)

• Background: Soft white (#F9FAFB) with subtle border lines.
• Surface: Pure white (#FFFFFF) cards with soft shadow effects (elevation).
• Primary Color: Vibrant Indigo (#4F46E5) for buttons and active states.
• Typography: Clean sans-serif fonts (e.g., Inter, system-ui) to ensure readability.
• Transitions: 200ms ease-in-out for all hover states and UI adjustments.

Technical Directives

1. Single File Architecture: All HTML, Tailwind CSS, and Vanilla JavaScript must be in one .html file.
2. No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. Maintain state solely in an in-memory JavaScript object. If the page reloads, the state resets.
3. SVG Implementation: Use direct DOM manipulation for the SVG elements to ensure high-performance rendering.
4. No Dependencies: Use reliable CDNs (Tailwind CSS, standard browser APIs). Avoid any build steps or npm-based dependencies.
5. Responsive Design: Ensure the split-pane layout stacks vertically on mobile devices (screens < 768px). Maintain a minimum touch target size of 44px for all inputs.
6. Sandboxed Compatibility: Ensure no alert(), prompt(), or confirm() calls are used. Use a custom modal overlay for confirmations if needed.
7. Export Logic: Generate the SVG string in memory and use a temporary <a> tag with a blob: URL for the download trigger.