Free Online SVG Blob Generator

Overview

A high-performance, single-file browser tool for generating procedural, organic SVG shapes (blobs). Designed for UI/UX designers and web developers, this tool allows for the creation of unique geometric forms that can be exported as SVG code or CSS clip-path values.

Core Features

• Randomized Generation: One-click generation of unique, organic shapes.
• Customizable Complexity: Slider to adjust the number of points (complexity) of the blob.
• Tension Control: Adjust how "rounded" or "spiky" the corners of the blob appear.
• Live Preview: Real-time rendering of the shape in the browser.
• Multi-Format Export:
  • Copy SVG Code (for embedding).
  • Copy CSS Clip-path (for masking DOM elements).
  • Download as .svg file.
• Color Picker: Adjust the blob fill color to preview in context.

Technical Implementation Details

• Architecture: Single-file architecture using HTML5, CSS3, and Vanilla JavaScript.
• Storage: Absolutely NO localStorage, sessionStorage, or cookies. The state is maintained purely in memory.
• Styling: Tailwind CSS (via CDN) for a clean, vibrant, light-mode-only SaaS interface.
• Rendering: Uses SVG path commands generated dynamically based on point coordinates.
• Responsive Design: Side-panel controls for desktop; bottom-sheet or collapsed control layout for mobile views.
• Sandboxing: Compatible with iframe-based deployment. All dialogs must be custom HTML modals (no alert() or prompt()).

UI/UX Design Specifications

• Color Palette: High-contrast, vibrant light mode.
  • Background: #f8fafc (Slate 50)
  • Primary Accent: #4f46e5 (Indigo 600)
  • Surface: #ffffff (White) with soft drop shadows (shadow-sm, shadow-md).
• Typography: Inter or System UI font stack for maximum readability.
• Animations:
  • Smooth transition: all 0.3s ease for UI elements.
  • Subtle CSS animation for blob rendering when points are randomized.
• Layout:
  • Header: Sticky top header with app title.
  • Main Area: Split-screen layout. Left side contains configuration sliders and buttons; right side contains a large, centered preview canvas.
  • Export Section: Fixed bottom bar or dedicated tab in the control panel showing the generated code with a "Copy to Clipboard" button.

Developer Instructions

1. Do not use any external frameworks (React, Vue, etc.).
2. CDN Usage: Use only official, stable CDN links (Tailwind, Lucide Icons).
3. Browser Compatibility: Use modern ES6+ features but ensure the SVG paths are generated cleanly.
4. Accessibility: Ensure all buttons have proper labels and focus states for keyboard navigation.
5. Light Mode Force: Ensure all CSS resets or overrides strictly forbid dark-themed color schemes.