Interactive Venn Diagram Maker & Visualization Tool

Overview

A high-quality, responsive, browser-based application designed to help students, analysts, and professionals create clean, professional-looking Venn diagrams instantly. This tool prioritizes immediate visual feedback and ease of use, allowing users to input text labels for individual sets and intersections and export the result as an image file.

Core Features

• Dynamic Rendering: Real-time rendering using SVG. As users type in the inputs, the diagram updates instantaneously without page reloads.
• Mode Selection: Toggle between a 2-circle (A, B, A∩B) and 3-circle (A, B, C, A∩B, B∩C, A∩C, A∩B∩C) diagram.
• Customizable Inputs: Dedicated text fields for every distinct region in the Venn diagram, allowing for detailed content placement.
• Style Controls: Color picker for each circle and global font styling to ensure the diagram matches presentation needs.
• Export Functionality: One-click download of the generated diagram as a high-resolution PNG file using the Canvas API.
• Responsive Interface: The layout adjusts from a side-by-side view on desktop to a stacked view on mobile devices.

Technical Implementation Specifications

• Architecture: Single HTML5 file containing internal CSS (Tailwind via CDN) and Vanilla JavaScript.
• Rendering: Use the <svg> element for the diagram itself to ensure vector quality and easy exportability.
• No Persistence: The application must strictly use in-memory state. No usage of localStorage, sessionStorage, or cookies.
• State Management: A single global state object should hold the current configuration (labels, colors, number of circles), with a render() function that reconstructs the SVG DOM based on this state.
• Exporting: Use a hidden <canvas> to draw the SVG content for the PNG export function. Ensure proper handling of cross-origin policies for any assets.

UI/UX Design Guidelines

• Aesthetic: Modern SaaS aesthetic. Use a light, clean palette (white backgrounds, subtle light-gray borders, soft blue/indigo accent buttons).
• Spacing: Generous use of whitespace. Inputs should have rounded corners (rounded-lg) and soft, subtle shadows (shadow-sm).
• Typography: Clean, sans-serif system fonts (e.g., Inter, -apple-system).
• Interactions: Use CSS transitions for button hover states and smooth fade-in animations when switching between 2-circle and 3-circle modes.
• Feedback: Immediate input validation and UI highlighting to show which section is being edited.

Color Palette

• Background: #FFFFFF
• Surface: #F9FAFB
• Primary Accent: #4F46E5 (Indigo)
• Text: #111827 (Heading), #4B5563 (Body)
• Borders/Dividers: #E5E7EB

Developer Directives

1. Do not use external frameworks (React/Vue/Angular). Keep JS pure.
2. Avoid alert/confirm/prompt. Use custom-styled <div> modals if user confirmation is required.
3. Accessibility: Ensure all inputs have associated <label> elements or aria-label attributes for screen readers.
4. Performance: Debounce input listeners to prevent excessive re-renders during rapid typing.