- name
- svg-generator
- description
- 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.
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
| Style | Description | Best For |
|---|
tech | Abstract tech elements (data flows, nodes, circuits) | Tech websites, SaaS landing pages |
minimal | Clean, simple gradients and shapes | Professional sites, portfolios |
geometric | Mathematical patterns and geometric shapes | Modern designs, dashboards |
abstract | Artistic abstract compositions | Creative projects, social media |
Color Schemes
| Scheme | Colors | Use Case |
|---|
blue-purple | Tech blue to purple gradient | SaaS, tech products |
gray-blue | Professional gray to blue | Corporate, business |
teal-cyan | Modern teal to cyan | Fresh, modern designs |
green-blue | Nature-inspired green to blue | Eco, wellness brands |
custom | Specify your own hex colors | Brand-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 scriptscripts/svg-to-png.js - Convert SVG to PNGscripts/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 presentationsdiagram - For generating diagrams alongside backgrounds
