Create custom Voronoi diagrams for stained glass patterns with this free online generator. Customize site count, cell density, and export professional SVGs.
AI Generation Prompt
Technical Specification: Browser-Based Voronoi Stained Glass Generator
Overview
A high-performance, single-file browser tool that generates Voronoi diagrams as downloadable SVGs, specifically optimized for stained glass artists and geometric designers. The application provides an interactive canvas where users can manipulate point density and export vector files.
Technical Architecture
- Single File: Pure HTML5, CSS3, and Vanilla JavaScript. No backend or build steps.
- Rendering: Use
d3-delaunay(via CDN) for efficient Voronoi calculation and native SVG DOM manipulation for rendering. - State Management: In-memory variables only. No localStorage or cookies.
- Compatibility: Strictly sandboxed iframe compliant.
UI Layout
1. Header
- Clean, minimalist title: "Voronoi Pattern Generator"
- Subtle navigation/action area for "Randomize Pattern" and "Download SVG".
2. Main Workspace (Responsive)
- Control Sidebar (Left or Top on mobile):
- Slider: "Site Density" (range 10 to 500).
- Toggle: "Show/Hide Centroids".
- Color Picker: "Stroke Color" and "Background Fill".
- Range Slider: "Stroke Width".
- Canvas Area (Main Content):
- Centered, responsive SVG container with a subtle drop shadow to elevate it from the background.
- Real-time preview rendering.
3. Modals & Interaction
- Custom overlay for "Export Options" (e.g., File format, scaling).
- No
alert()orconfirm()—all feedback via unobtrusive toast-style notifications.
Visual Design & Aesthetics
- Palette: Pure Light Mode.
- Background:
#F8FAFC(Slate 50). - Elements/Controls:
#FFFFFF(White) with subtle borders#E2E8F0(Slate 200). - Primary Buttons:
#3B82F6(Blue 500) with hover transitions. - Text:
#1E293B(Slate 800).
- Background:
- Animations:
- Smooth transitions on slider adjustments.
- Subtle fade-in animations when generating new diagrams.
- Responsive resizing that maintains the aspect ratio of the SVG.
Developer Directives
- CDN Libraries: Use
https://cdn.jsdelivr.net/npm/d3-delaunay@6for math andhttps://cdn.tailwindcss.comfor styling. - State Handling: All configuration (density, colors, stroke width) must be held in a JS object (e.g.,
const state = { ... }). Do not uselocalStorageto save settings. - Responsive Design: Use CSS Grid/Flexbox to ensure controls are usable on touch devices.
- Download Logic: Create a Blob URL using
URL.createObjectURL(new Blob([svgContent], {type: 'image/svg+xml'}))to trigger the download. - No External Dependencies: Ensure all icons are either inline SVGs or minimal CSS, avoiding external font requests if possible.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a Voronoi diagram in the context of stained glass design?
A Voronoi diagram is a geometric method used to partition a plane into regions based on a set of points. In stained glass design, these regions represent individual glass pieces, creating a unique, organic, and geometric aesthetic that looks like natural stone or mosaic structures. Our generator calculates these cells algorithmically, allowing designers to visualize complex layouts that can be easily cut and assembled. It creates a mathematical framework for balanced, intricate patterns that would be difficult to draw by hand, ensuring each glass segment is interconnected.
Can I download my Voronoi pattern as a vector file?
Yes, the tool is designed to export your custom creations as scalable SVG (Scalable Vector Graphics) files. SVG files are industry-standard for vector graphics, meaning you can scale them to any size without losing resolution, making them perfect for printing patterns to use as glass cutting templates. Once exported, you can import the SVG into any vector editing software, such as Adobe Illustrator or Inkscape, to further refine the lines, resize the pattern to match your project's specific dimensions, or prepare the paths for laser cutting or CNC machining.
How do I control the density of the glass pieces?
You can easily adjust the density of the glass pieces using the 'Site Count' slider located in the control panel. Increasing the number of points generates a pattern with many small, intricate glass segments, while lowering the count creates fewer, larger pieces for a simpler design. This dynamic control allows you to experiment with different visual styles, from dense, mosaic-like patterns to minimalist geometric structures. The tool updates the SVG canvas in real-time as you move the slider, providing immediate visual feedback so you can find the perfect balance for your stained glass art.
Are there any storage or sign-up requirements to use this tool?
No, this is a completely free, browser-based tool that requires no account, login, or personal information. We respect your privacy and data security by keeping all processing local to your web browser, ensuring that your designs remain yours alone. Because the tool is entirely client-side, it does not store your patterns in any external database or browser storage (like localStorage). To save your work, simply use the 'Download SVG' button to save the file directly to your local computer after you have finalized your design.
Related Applications
Free EDI X12 Syntax Highlighter & Parser Tool
@Akhenaten
Free Online SQL Query Minifier & Code Compressor Tool
@Akhenaten
Free Hardy-Weinberg Equilibrium Allele Frequency Calculator
@Akhenaten
Free Scroll Progress Bar Code Generator - HTML/CSS/JS
@Akhenaten