Free Online SVG Filter Generator & Code Editor

Overview

A high-performance, browser-based utility for creating, editing, and exporting custom SVG filters. This tool provides developers and designers with an interactive interface to manipulate SVG primitives in real-time, instantly generating the corresponding XML code for web implementation.

Core Features

• Real-Time Visual Preview: A dynamic stage that shows the filter applied to both sample shapes and user-uploaded images.
• Primitive Stack Editor: Add, remove, and reorder filter primitives including:
  • feGaussianBlur (Blur radius control)
  • feTurbulence (Frequency, octaves, and seed adjustments)
  • feDisplacementMap (Scale and channel selectors)
  • feColorMatrix (Color shifts and saturation adjustments)
• Live Code Generation: Auto-updating XML/SVG output pane that allows for one-click copying of the filter code.
• Preset Library: Quick access to common effects like soft shadows, glass distortion, and grain textures.
• Parameter Controls: Precise sliders and input fields for every primitive attribute to ensure pixel-perfect adjustments.

User Interface Layout

• Header: Clean, branding-free title with a descriptive tagline.
• Split-Pane Design:
  • Left Sidebar (Controls): Organized into an accordion-style menu where users can manage the filter stack and adjust specific parameters.
  • Center Canvas (Preview): A neutral gray background stage that renders the current SVG filter state.
  • Right Sidebar (Output): A read-only text box displaying the live XML/SVG code with a dedicated 'Copy to Clipboard' button.

Design System & Aesthetics

• Palette: Strict light-mode only.
  • Backgrounds: #FFFFFF (Canvas) and #F9FAFB (UI panels).
  • Accents: #3B82F6 (Primary Blue for buttons and active states).
  • Text: #1F2937 (Dark slate) for high readability.
  • Borders: #E5E7EB (Subtle gray lines for component separation).
• Animations: Subtle transitions on hover (ease-in-out) and micro-interactions when moving sliders to ensure the interface feels responsive and premium.

Technical Implementation Guidelines

• Architecture: Single HTML file containing all HTML, CSS, and vanilla JavaScript.
• Performance: All state is handled in-memory using JavaScript variables. Do not use localStorage or any browser-based storage due to sandbox security constraints.
• Interaction: Use custom JavaScript modals for any user notifications (e.g., "Code Copied!") instead of browser-native alerts.
• Dependencies: Use CDN links for any icons (e.g., FontAwesome or Phosphor Icons) and utility libraries (e.g., Tailwind CSS for styling), but keep logic pure Vanilla JS.
• Responsiveness: The layout must switch from side-by-side to stacked (vertical) mode on mobile screens to ensure the controls and preview remain accessible.