Add Filter

Add Filter

Adds filter definitions to SVG files for visual effects like blur, shadows, glow, and color adjustments.

Usage

node .claude/skills/add-filter/index.js <svg-file> <type> <id> [options]

Filter Types

Effects

Color Adjustments

Common Options

Examples

Blur

# Soft blur
node .claude/skills/add-filter/index.js output/art.svg blur softBlur amount=2

# Heavy blur
node .claude/skills/add-filter/index.js output/art.svg blur heavyBlur amount=8

Drop Shadow

# Basic shadow
node .claude/skills/add-filter/index.js output/art.svg drop-shadow shadow

# Custom shadow
node .claude/skills/add-filter/index.js output/art.svg drop-shadow longShadow dx=6 dy=6 amount=3 opacity=0.4

# Colored shadow
node .claude/skills/add-filter/index.js output/art.svg drop-shadow redShadow color=#E53935 opacity=0.6

Glow

# White glow
node .claude/skills/add-filter/index.js output/art.svg glow whiteGlow color=#fff amount=5

# Neon glow
node .claude/skills/add-filter/index.js output/art.svg glow neonGlow color=#00ff00 amount=8 opacity=1

# Soft warm glow
node .claude/skills/add-filter/index.js output/art.svg glow warmGlow color=#FDD835 amount=4 opacity=0.6

Inner Shadow

# Inset shadow
node .claude/skills/add-filter/index.js output/art.svg inner-shadow inset dx=2 dy=2 amount=2

Emboss

# Raised effect
node .claude/skills/add-filter/index.js output/art.svg emboss raised amount=1

Noise/Texture

# Subtle grain
node .claude/skills/add-filter/index.js output/art.svg noise grain amount=0.2

# Heavy distortion
node .claude/skills/add-filter/index.js output/art.svg noise distort amount=0.8 freq=0.5

Color Adjustments

# Grayscale
node .claude/skills/add-filter/index.js output/art.svg grayscale gray

# Partial grayscale (50%)
node .claude/skills/add-filter/index.js output/art.svg grayscale halfGray amount=0.5

# Sepia tone
node .claude/skills/add-filter/index.js output/art.svg sepia vintage

# Invert colors
node .claude/skills/add-filter/index.js output/art.svg invert negative

# Increase saturation
node .claude/skills/add-filter/index.js output/art.svg saturate vivid amount=2

# Desaturate
node .claude/skills/add-filter/index.js output/art.svg saturate muted amount=0.5

# Brighten
node .claude/skills/add-filter/index.js output/art.svg brightness bright amount=1.5

# Darken
node .claude/skills/add-filter/index.js output/art.svg brightness dark amount=0.7

# High contrast
node .claude/skills/add-filter/index.js output/art.svg contrast highContrast amount=2

# Low contrast
node .claude/skills/add-filter/index.js output/art.svg contrast lowContrast amount=0.5

Applying Filters

After creating a filter, apply it using edit-element:

# Apply to specific element
node .claude/skills/edit-element/index.js output/art.svg circle:0 filter "url(#shadow)"

# Apply to all paths
node .claude/skills/edit-element/index.js output/art.svg path filter "url(#blur)"

# Remove filter
node .claude/skills/edit-element/index.js output/art.svg circle:0 filter "none"

Common Workflows

Depth with Shadows

# Create layered shadows for depth
node .claude/skills/add-filter/index.js output/art.svg drop-shadow close dx=2 dy=2 amount=1 opacity=0.3
node .claude/skills/add-filter/index.js output/art.svg drop-shadow far dx=8 dy=8 amount=4 opacity=0.2

Neon Sign Effect

# Bright glow on dark background
node .claude/skills/add-filter/index.js output/art.svg glow neon color=#ff00ff amount=6 opacity=1
node .claude/skills/edit-element/index.js output/art.svg text filter "url(#neon)"

Vintage Photo

# Combine sepia and low contrast
node .claude/skills/add-filter/index.js output/art.svg sepia vintage amount=0.8
node .claude/skills/edit-element/index.js output/art.svg rect:0 filter "url(#vintage)"

Focus Effect

# Blur background, keep subject sharp
node .claude/skills/add-filter/index.js output/art.svg blur bgBlur amount=3
node .claude/skills/edit-element/index.js output/art.svg path filter "url(#bgBlur)"
# Leave the main subject without filter

Notes

• Filters are stored in <defs> section
• Reference filters with url(#id) syntax
• Filter region extends 50% beyond element bounds (handles shadows/glows)
• Filters can impact rendering performance on complex SVGs
• Combine multiple filters by chaining or creating composite filters
• Amount values vary by filter type (see examples for typical ranges)