svg-generator-pro

Other

Generate customizable SVG backgrounds and graphics with multiple styles (tech, minimal, geometric, abstract) and color schemes. Use when creating website backgrounds, presentation slides, social media graphics, or UI decorative elements.

Install

openclaw skills install svg-generator-pro

SVG Generator Skill

Generate beautiful, customizable SVG backgrounds and graphics for websites, presentations, and more.

Features

  • 4 Styles: tech, minimal, geometric, abstract
  • 5 Color Schemes: blue-purple, gray-blue, teal-cyan, green-blue, custom
  • Local Execution: No API costs, completely free
  • Web Ready: Responsive design, optimized for web use

Quick Start

# Generate tech-style background
svg-generator --style tech --colors blue-purple --output hero-bg.svg

# Generate minimal background
svg-generator --style minimal --colors gray-blue --output simple-bg.svg

# Generate geometric pattern
svg-generator --style geometric --colors teal-cyan --output pattern-bg.svg

# Generate abstract art
svg-generator --style abstract --colors green-blue --output art-bg.svg

Styles Available

StyleDescriptionBest For
techAbstract tech elements (data flows, nodes, circuits)Tech websites, SaaS landing pages
minimalClean, simple gradients and shapesProfessional sites, portfolios
geometricMathematical patterns and geometric shapesModern designs, dashboards
abstractArtistic abstract compositionsCreative projects, social media

Color Schemes

SchemeColorsUse Case
blue-purpleTech blue to purple gradientSaaS, tech products
gray-blueProfessional gray to blueCorporate, business
teal-cyanModern teal to cyanFresh, modern designs
green-blueNature-inspired green to blueEco, wellness brands
customSpecify your own hex colorsBrand-specific needs

Advanced Usage

Custom Colors

svg-generator --style tech --colors "#FF6B6B-#4ECDC4" --output custom.svg

Generate PNG

# First generate SVG, then convert
svg-to-png input.svg output.png --width 1920 --height 1080

Bundled Resources

Scripts

  • scripts/generate-svg.js - Main SVG generation script
  • scripts/svg-to-png.js - Convert SVG to PNG
  • scripts/ppt-image-generator.js - Generate images for PPT templates

Assets

  • assets/ - Sample SVG outputs for reference

Integration Examples

Website Hero Background

svg-generator --style tech --colors blue-purple --output public/hero-bg.svg

Social Media Post

svg-generator --style abstract --colors teal-cyan --output social-post.svg
svg-to-png social-post.svg social-post.png --width 1080 --height 1080

Presentation Slide

ppt-image-generator --template modern --output slide-bg.svg

Related Skills

  • pptx-2 - For integrating SVG into PowerPoint presentations
  • diagram - For generating diagrams alongside backgrounds