Interactive Sri Yantra Geometric Pattern Generator

Overview

A high-performance, browser-based utility for generating precise Sri Yantra geometric patterns. Designed for artists, designers, and students of sacred geometry, this tool eliminates the complexity of manual construction by providing an interactive, parametric interface.

Core Features

• Parametric Controls: Fine-tune triangle intersection angles, stroke width, inner/outer radii, and bindu size.
• Real-time Rendering: Instant updates to the geometric visualization using requestAnimationFrame for smooth interaction.
• Export Module: Generate and download designs as high-resolution PNG or vector-based SVG files.
• Guide Overlays: Toggle helper grids, center-point markers, and construction circles for precision.
• Style Customization: Adjustable line colors, opacity settings, and background variations (paper-texture simulation).

Technical Architecture

• Environment: Single-file architecture (HTML/CSS/JS). No backend, no dependencies requiring build tools.
• Rendering: HTML5 Canvas API for high-performance vector-like rendering.
• State Management: Pure Vanilla JavaScript in-memory state management. Strictly no localStorage or cookies.
• Dependencies: Tailwind CSS via CDN for styling; FontAwesome (via CDN) for UI icons.
• Performance: Optimized loops for geometry calculation; event throttling on range inputs to prevent UI lag.

UI/UX Design

• Layout:
  • Header: Clean, minimalist title with a 'Download' action button.
  • Sidebar (Left): Contextual control panel containing grouped sliders and toggles.
  • Main Canvas (Center/Right): Large, responsive drawing area. Centered, with subtle shadow-casing to make the canvas 'pop' from the background.
• Visual Aesthetic:
  • Palette: Clean, professional light-mode aesthetic.
    • Background: #FFFFFF (Main) / #F3F4F6 (Sidebar)
    • Primary Action: #2563EB (Blue)
    • Border/Inactive: #E5E7EB
    • Text: #1F2937
  • Typography: Sans-serif, geometric-friendly typeface (e.g., Inter or system-ui).
  • Interactions: Subtle CSS transitions on hover states for buttons. Smooth slider movement with numeric value indicators.

Developer Directives

1. Sandbox Compatibility: Do not use localStorage, sessionStorage, or cookies. Avoid alert() or confirm(); use custom HTML modals if user feedback is required.
2. No External Branding: This is a neutral utility. Use generic descriptive labels.
3. Responsive Logic: The canvas must resize dynamically based on container dimensions using ResizeObserver.
4. No Footer: The layout must terminate after the canvas and control sections. No footer required.
5. Light Mode Only: Do not implement theme switching. Maintain a bright, airy design profile.
6. Export Logic: Use canvas.toDataURL() for PNG and a string-building function to generate the SVG markup for download, triggered via a hidden <a> element blob.