Logo Generator

Logo Generator

Generate professional SVG logos and high-end showcase presentations for products and brands.

Workflow

Phase 1: Information Gathering

Collect essential information from the user:

1. Product/Brand Name (required) 2. Industry/Category (e.g., AI, fintech, design tools) 3. Core Concept (e.g., connection, flow, security, simplicity) 4. Design Preferences:

• Style: minimal/complex, geometric/organic
• Color preference: monochrome/specific colors
• Mood: cold/warm, professional/friendly

Ask concise questions to gather this information. Don't overwhelm the user with too many questions at once.

Phase 2: Pattern Matching & SVG Generation

Based on the gathered information:

1. Generate at least 6 design variants based on references/design_patterns.md

• Match patterns to product characteristics
• Use different pattern types and combinations for diversity
• Include both single-pattern and mixed-pattern compositions
• Vary complexity levels (simple geometric to layered compositions)
• Each variant should feel distinctly different, not just parameter tweaks
• Explain the design rationale for each variant

2. Generate SVG code for each variant

• Use viewBox="0 0 100 100" for easy scaling
• Keep code clean and well-structured
• Use currentColor for flexible color control
• Add subtle animations for web display (optional)

3. Create interactive showcase webpage

• Display all 6+ logo variants in a grid layout
• Use the template from assets/showcase_template.html
• Include hover effects and smooth transitions
• Add design rationale for each variant
• Allow easy comparison between variants

Phase 3: Iteration & Refinement

Allow user to provide feedback:

• Select favorite variants (narrow down from 6+ to 2-3)
• Adjust specific parameters (size, spacing, rotation)
• Combine elements from different variants
• Change colors or add gradients
• Modify animations or effects
• Generate additional variants exploring specific directions

Make targeted adjustments based on feedback. Don't regenerate everything unless requested.

Phase 4: High-End Showcase Generation

Once the user selects a preferred logo direction:

1. Export SVG to PNG

• Use scripts/svg_to_png.py to convert SVG to PNG
• Default size: 1024x1024px
• Ensure transparent background

2. Select showcase styles

• Review references/background_styles.md
• Recommend 4 styles based on product type and mood
• Explain why each style fits

3. Generate showcase images

• Set up environment (copy .env.example to .env, add API key)
• Use scripts/generate_showcase.py with --all-styles flag
• Or generate specific styles individually
• Each image uses the PNG as reference with Nano Banana API

4. Create final presentation webpage

• Combine SVG variants and showcase images
• Use professional layout with micro-typography
• Include download links for all assets

Phase 5: Delivery

Provide the user with:

• Interactive HTML showcase page
• SVG files (editable vector format)
• PNG exports (various sizes if requested)
• Showcase images (4 professional backgrounds)

Key Design Principles

1. Provide Variety: Generate at least 6 distinct variants to give users real choices 2. Start Simple: Begin with basic patterns, add complexity only when needed 3. Meaningful Design: Connect visual elements to product concepts 4. Scalability: Ensure logos work at all sizes 5. Professional Quality: Match high-end brand identity standards 6. Flexibility: Provide multiple variants for different use cases

Technical Notes

SVG Best Practices

• Keep viewBox at 0 0 100 100 for consistency
• Use semantic grouping with <g> tags
• Leverage <defs> for reusable elements
• Use <clipPath> for masking effects
• Prefer geometric primitives over complex paths when possible

Showcase Image Generation

The generate_showcase.py script requires:

• Python 3.8+
• Dependencies: pip install -r requirements.txt
• Environment variables in .env file
• Reference PNG image (exported from SVG)

Supports both official Google Gemini API and third-party endpoints via GEMINI_API_BASE_URL.

Available Background Styles

From references/background_styles.md:

12 Professional Styles Available:

Dark Styles (6):

• void (绝对虚空) - Absolute minimalism, hardcore tech
• frosted (磨砂穹顶) - Modern breathing space, premium products
• fluid (流体深渊) - AI-native fluidity, dynamic systems
• spotlight (物理影棚) - Studio lighting, editorial quality
• analog_liquid (物理流体) - Metallic shimmer on solid color base, creative brands
• led_matrix (数字硬件) - Digital retro, cyberpunk aesthetics

Light Styles (6):

• editorial (纸本编辑) - Specialty paper, humanistic brands
• iridescent (幻彩透砂) - Optical materials, tech hardware
• morning (晨雾光域) - AI softness, approachable products
• clinical (无菌影棚) - Spatial order, algorithm-driven brands
• ui_container (容器化界面) - Digital product native, SaaS platforms
• swiss_flat (瑞士扁平) - Absolute flatness, timeless authority

Each style has specific visual characteristics and suitable use cases. Consult the reference document for details.

Common Patterns

Pattern: Concentric Circle Dots

<svg viewBox="0 0 100 100">
  <g>
    <!-- Inner ring: 6 dots -->
    <circle cx="50" cy="38" r="3" fill="currentColor"/>
    <!-- Add more dots in circular arrangement -->
  </g>
</svg>

Pattern: Geometric Shape with Line Accent

<svg viewBox="0 0 100 100">
  <polygon points="50,30 70,60 30,60" fill="none" stroke="currentColor" stroke-width="2"/>
  <circle cx="50" cy="30" r="4" fill="currentColor"/>
</svg>

Pattern: Node Network

<svg viewBox="0 0 100 100">
  <path d="M 30 70 Q 50 70, 50 50 T 70 30" stroke="currentColor" stroke-width="2" fill="none"/>
  <circle cx="30" cy="70" r="4" fill="currentColor"/>
  <circle cx="50" cy="50" r="5" fill="currentColor"/>
  <circle cx="70" cy="30" r="4" fill="currentColor"/>
</svg>

For more patterns and combinations, see references/design_patterns.md.

Troubleshooting

SVG not displaying correctly: Check viewBox and ensure all paths are closed

PNG export fails: Verify cairosvg is installed (pip install cairosvg)

Showcase generation fails:

• Check .env file has valid GEMINI_API_KEY
• Verify reference PNG exists and is readable
• Check API quota/rate limits

Third-party API not working: Ensure GEMINI_API_BASE_URL is correctly formatted (e.g., https://api.example.com/v1)

Logo Generator / Logo 生成器

English | 中文

---

English

Professional SVG logo generator with high-end showcase presentations. Generate 6+ design variants based on product characteristics, then create stunning showcase images with 12 professional background styles.

About

This skill was created to solve a common problem: generating professional logos quickly without sacrificing quality. Traditional logo design requires extensive back-and-forth with designers, while AI-generated logos often lack the refinement and presentation quality needed for real products.

Logo Generator bridges this gap by:

• Applying proven design principles (extreme simplicity, generous negative space, precise proportions)
• Generating multiple variants to explore different directions
• Creating production-ready showcase images with professional backgrounds
• Providing both SVG (editable) and PNG (ready-to-use) formats

Perfect for:

• Startups needing a professional logo quickly
• Developers building side projects
• Designers exploring initial concepts
• Product teams iterating on brand identity

The skill leverages Gemini 3.1 Flash Image Preview (Nano Banana) to generate high-end showcase images that look like they came from a professional design studio.

Features

• SVG Logo Generation: Create geometric logos with dot matrix, line systems, and mixed compositions
• Design Variety: Generate 6+ distinct variants per request with different pattern types
• Professional Showcase: 12 curated background styles (void, frosted, fluid, spotlight, analog liquid, LED matrix, editorial, iridescent, morning, clinical, UI container, Swiss flat)
• Nano Banana Integration: High-end showcase images using Gemini 3.1 Flash Image Preview
• Interactive Previews: Beautiful HTML showcases with hover effects and smooth transitions

Installation

Method 1: Automatic Installation (Recommended)

npx skills add https://github.com/op7418/logo-generator-skill.git

This will automatically install the skill to the correct directory.

Method 2: Git Clone

git clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator

Method 3: Manual Installation

1. Download this repository 2. Copy the logo-generator folder to your Claude Code skills directory:

• macOS/Linux: ~/.claude/skills/
• Windows: %USERPROFILE%\.claude\skills\

3. Ensure the folder structure contains SKILL.md and README.md

Post-Installation Setup

After installation, set up the required dependencies:

cd ~/.claude/skills/logo-generator
pip install -r requirements.txt

Configure your Gemini API key:

cp .env.example .env
# Edit .env and add your GEMINI_API_KEY

Restart Claude Code and verify by typing /logo-generator in the conversation.

Usage

Basic Workflow

1. Start a logo project:

   Generate a logo for my AI product called "DataFlow"

2. Provide context (the AI will ask):

• Industry/Category (e.g., AI, fintech, design tools)
• Core Concept (e.g., connection, flow, security)
• Design Preferences (minimal/complex, cold/warm)

3. Review variants: The AI generates 6+ SVG logo variants with design rationale

4. Select and refine: Choose your favorite, request adjustments

5. Generate showcase: Create professional presentation images with multiple background styles

Example Commands

Create a logo for a blockchain security platform

Generate 6 logo variants for "CloudSync" - a file sync tool

Show me the logo in different background styles

Export the logo as PNG at 2048x2048

Workflow Phases

Phase 1: Information Gathering Collect product name, industry, core concept, and design preferences

Phase 2: Pattern Matching & SVG Generation

• Generate 6+ distinct design variants
• Create interactive HTML showcase
• Explain design rationale for each variant

Phase 3: Iteration & Refinement

• Select favorite variants
• Adjust parameters (size, spacing, rotation)
• Combine elements from different variants

Phase 4: High-End Showcase Generation

• Export SVG to PNG (1024x1024px)
• Select 4 showcase styles based on product type
• Generate showcase images with Nano Banana
• Create final presentation webpage

Phase 5: Delivery

• Interactive HTML showcase page
• SVG files (editable vector format)
• PNG exports (various sizes)
• Showcase images (4 professional backgrounds)

Background Styles

Dark Styles (6)

• The Void - Absolute black with silver micro noise (hardcore tech)
• Frosted Horizon - Titanium gray with organic texture (premium products)
• Fluid Abyss - Deep purple with fluid fusion (AI-native)
• Studio Spotlight - Carbon gray with editorial lighting (magazine quality)
• Analog Liquid - Metallic shimmer on solid color base (creative brands)
• LED Matrix - Digital retro with glowing dots (cyberpunk)

Light Styles (6)

• Editorial Paper - Off-white with paper texture (humanistic brands)
• Iridescent Frost - Silver-gray with holographic hints (tech hardware)
• Morning Aura - Warm ivory with pastel colors (approachable AI)
• Clinical Studio - Pure white with geometric shadows (algorithm-driven)
• UI Container - Frosted glass container effect (SaaS platforms)
• Swiss Flat - Pure solid color, zero effects (timeless authority)

Design Principles

1. Extreme Simplicity - 1-2 core elements maximum 2. Generous Negative Space - At least 40-50% empty canvas 3. Precise Proportions - Line weights 2.5-4px, proper spacing 4. Visual Tension - Intentional asymmetry creates interest 5. Restraint Over Decoration - Every element must justify its existence 6. Single Focal Point - Clear visual hierarchy

File Structure

logo-generator/
├── SKILL.md                    # Skill definition and workflow
├── README.md                   # This file
├── requirements.txt            # Python dependencies
├── .env.example               # Environment variables template
├── scripts/
│   ├── svg_to_png.py          # SVG to PNG converter
│   └── generate_showcase.py   # Showcase image generator
├── references/
│   ├── design_patterns.md     # Comprehensive design guide
│   ├── background_styles.md   # Background style specifications
│   └── webgl_backgrounds.md   # WebGL dynamic backgrounds
└── assets/
    ├── showcase_template.html # HTML template for showcases
    └── background_library.html # Interactive WebGL backgrounds

Requirements

• Python 3.8+
• Dependencies: google-genai, python-dotenv, cairosvg, Pillow
• Gemini API key (for showcase generation)

API Configuration

Official Google Gemini API

GEMINI_API_KEY=your_api_key_here
GEMINI_MODEL=gemini-3.1-flash-image-preview

Third-Party API Endpoint

GEMINI_API_KEY=your_api_key_here
GEMINI_API_BASE_URL=https://api.example.com/v1
GEMINI_MODEL=gemini-3.1-flash-image-preview

License

MIT License - feel free to use for personal or commercial projects

Credits

• Design patterns inspired by modern brand identity systems
• Showcase styles curated from high-end design presentations
• Powered by Gemini 3.1 Flash Image Preview (Nano Banana)

Contributing

Contributions welcome! Please feel free to submit issues or pull requests.

---

中文

专业的 SVG Logo 生成器，配备高端展示效果。基于产品特性生成 6+ 个设计变体，并使用 12 种专业背景风格创建精美的展示图。

关于本项目

这个技能的诞生源于一个常见痛点：如何在不牺牲质量的前提下快速生成专业 Logo。传统设计流程需要与设计师反复沟通，而 AI 生成的 Logo 往往缺乏精致度和展示效果。

Logo Generator 通过以下方式解决这个问题：

• 应用经过验证的设计原则（极致简洁、慷慨留白、精准比例）
• 生成多个变体以探索不同方向
• 创建可直接使用的专业展示图
• 提供 SVG（可编辑）和 PNG（即用）两种格式

适用场景：

• 创业公司 需要快速获得专业 Logo
• 开发者 构建个人项目
• 设计师 探索初期概念
• 产品团队 迭代品牌形象

本技能利用 Gemini 3.1 Flash Image Preview (Nano Banana) 生成高端展示图，效果媲美专业设计工作室。

功能特性

• SVG Logo 生成：创建几何 Logo，支持点阵、线条系统和混合构图
• 设计多样性：每次请求生成 6+ 个不同范式的设计变体
• 专业展示：12 种精选背景风格（绝对虚空、磨砂穹顶、流体深渊、聚光灯、物理流体、LED 矩阵、编辑纸张、幻彩透砂、晨曦光晕、临床工作室、UI 容器、瑞士扁平）
• Nano Banana 集成：使用 Gemini 3.1 Flash Image Preview 生成高端展示图
• 交互式预览：精美的 HTML 展示页面，带悬停效果和流畅过渡

安装方式

方法 1：自动安装（推荐）

npx skills add https://github.com/op7418/logo-generator-skill.git

这将自动将技能安装到正确的目录。

方法 2：Git 克隆

git clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator

方法 3：手动安装

1. 下载本仓库 2. 将 logo-generator 文件夹复制到 Claude Code 技能目录：

• macOS/Linux：~/.claude/skills/
• Windows：%USERPROFILE%\.claude\skills\

3. 确保文件夹结构包含 SKILL.md 和 README.md

安装后配置

安装完成后，设置所需的依赖：

cd ~/.claude/skills/logo-generator
pip install -r requirements.txt

配置 Gemini API 密钥：

cp .env.example .env
# 编辑 .env 文件并添加你的 GEMINI_API_KEY

重启 Claude Code 并在对话中输入 /logo-generator 验证安装成功。

使用方法

基本工作流

1. 启动 Logo 项目：

   为我的 AI 产品 "DataFlow" 生成一个 Logo

2. 提供上下文（AI 会询问）：

• 行业/类别（如：AI、金融科技、设计工具）
• 核心概念（如：连接、流动、安全）
• 设计偏好（极简/复杂、冷色/暖色）

3. 查看变体：AI 生成 6+ 个 SVG Logo 变体并说明设计理念

4. 选择和优化：选择你喜欢的方案，请求调整

5. 生成展示：创建多种背景风格的专业展示图

示例命令

为区块链安全平台创建一个 Logo

为 "CloudSync" 文件同步工具生成 6 个 Logo 变体

展示不同背景风格下的 Logo 效果

导出 2048x2048 的 PNG 格式 Logo

工作流程阶段

阶段 1：信息收集 收集产品名称、行业、核心概念和设计偏好

阶段 2：范式匹配与 SVG 生成

• 生成 6+ 个不同的设计变体
• 创建交互式 HTML 展示页面
• 解释每个变体的设计理念

阶段 3：迭代与优化

• 选择喜欢的变体
• 调整参数（大小、间距、旋转）
• 组合不同变体的元素

阶段 4：高端展示图生成

• 导出 SVG 为 PNG（1024x1024px）
• 根据产品类型选择 4 种展示风格
• 使用 Nano Banana 生成展示图
• 创建最终展示网页

阶段 5：交付

• 交互式 HTML 展示页面
• SVG 文件（可编辑矢量格式）
• PNG 导出（多种尺寸）
• 展示图（4 种专业背景）

背景风格

深色风格（6 种）

• 绝对虚空 - 纯黑 + 银色微噪点（硬核科技）
• 磨砂穹顶 - 钛灰 + 有机纹理（高端产品）
• 流体深渊 - 深紫 + 流体融合（AI 原生）
• 聚光灯 - 碳灰 + 编辑光效（杂志质感）
• 物理流体 - 纯色底 + 金属质感（创意品牌）
• LED 矩阵 - 数字复古 + 发光点阵（赛博朋克）

浅色风格（6 种）

• 编辑纸张 - 米白 + 纸张纹理（人文品牌）
• 幻彩透砂 - 银灰 + 全息微光（科技硬件）
• 晨曦光晕 - 暖象牙 + 柔和色彩（亲和 AI）
• 临床工作室 - 纯白 + 几何阴影（算法驱动）
• UI 容器 - 磨砂玻璃容器效果（SaaS 平台）
• 瑞士扁平 - 纯色无效果（永恒权威）

设计原则

1. 极致简洁 - 最多 1-2 个核心元素 2. 慷慨留白 - 至少 40-50% 空白画布 3. 精准比例 - 线条粗细 2.5-4px，合理间距 4. 视觉张力 - 有意的不对称创造趣味 5. 克制而非装饰 - 每个元素必须证明其存在价值 6. 单一焦点 - 清晰的视觉层级

文件结构

logo-generator/
├── SKILL.md                    # Skill 定义和工作流程
├── README.md                   # 本文件
├── requirements.txt            # Python 依赖
├── .env.example               # 环境变量模板
├── scripts/
│   ├── svg_to_png.py          # SVG 转 PNG 工具
│   └── generate_showcase.py   # 展示图生成器
├── references/
│   ├── design_patterns.md     # 综合设计指南
│   ├── background_styles.md   # 背景风格规范
│   └── webgl_backgrounds.md   # WebGL 动态背景
└── assets/
    ├── showcase_template.html # 展示页面模板
    └── background_library.html # 交互式 WebGL 背景库

系统要求

• Python 3.8+
• 依赖：google-genai、python-dotenv、cairosvg、Pillow
• Gemini API 密钥（用于展示图生成）

API 配置

官方 Google Gemini API

GEMINI_API_KEY=your_api_key_here
GEMINI_MODEL=gemini-3.1-flash-image-preview

第三方 API 端点

GEMINI_API_KEY=your_api_key_here
GEMINI_API_BASE_URL=https://api.example.com/v1
GEMINI_MODEL=gemini-3.1-flash-image-preview

开源协议

MIT License - 可自由用于个人或商业项目

致谢

• 设计范式灵感来自现代品牌识别系统
• 展示风格精选自高端设计展示
• 由 Gemini 3.1 Flash Image Preview (Nano Banana) 驱动

贡献

欢迎贡献！请随时提交 issue 或 pull request。

Background Styles for Logo Showcase

This document describes the 12 background styles available for generating high-end logo showcase images using Nano Banana.

Dark Styles

1. THE VOID (绝对虚空)

Concept: Absolute minimalism and mystery

Visual Characteristics:

• Base: Pure black (#000000)
• Noise: Extremely fine silver/white high-contrast micro noise
• Texture: Cold, sharp electronic film grain
• Atmosphere: Minimal - only a faint icy white or blue glow at extreme corner
• Mood: Infinite void, distant starlight at universe edge

Suitable For: Hardcore tech, data security, infrastructure

Saturation: Extremely low (5%)

---

2. FROSTED HORIZON (磨砂穹顶)

Concept: Modern breathing space with physical thickness

Visual Characteristics:

• Base: Deep titanium gray or midnight slate gray (not pure black)
• Noise: Organic film-like dust texture
• Texture: Unpolished rough metal or stone surface
• Atmosphere: Large area low-saturation cold gray-blue light halo, edges dissolved like mist
• Mood: Sophisticated, breathable, Apple-like presentation quality

Suitable For: Premium products, design-focused brands

Saturation: Low (10%)

---

3. FLUID ABYSS (流体深渊)

Concept: AI-native with data fluidity

Visual Characteristics:

• Base: Deep midnight purple or extremely dark Klein blue
• Noise: Slight color-tinted noise blending with base
• Texture: Deep-sea sediment or nebula quality
• Atmosphere: Fluid fusion - dark orange (right) + dark blue (left) slowly interweaving
• Mood: Mysterious, dynamic, computational

Suitable For: AI products, dynamic systems, data visualization

Saturation: Medium (20%)

---

4. STUDIO SPOTLIGHT (物理影棚)

Concept: Physical studio lighting simulation

Visual Characteristics:

• Base: Extremely dark warm carbon gray
• Noise: Slightly larger grain simulating low-light camera photography
• Texture: Paper print grain in weak light
• Atmosphere: Single-side softbox or spotlight creating natural vignette
• Mood: Editorial magazine quality, professional photography

Suitable For: Editorial design, magazine-style presentations

Saturation: None (0%)

---

5. ANALOG LIQUID (物理流体)

Concept: Physical fluid textures with conflict aesthetics

Visual Characteristics:

• Base: Solid color - choose ONE: vibrant orange (#FF6B00), Klein blue (#002FA7), or lime green (#00FF41)
• Noise: Microscopic cellular patterns or extreme grainy "thermal imaging" roughness
• Texture: Metallic shimmer overlay - gold dust flow, metallic mica powder, iridescent pigments
• Atmosphere: Chaotic organic texture contrasting with ultra-clean vector logo
• Mood: Chemical reaction, inspiration, artistic creativity

Suitable For: Creative tools, artistic brands, experimental products

Saturation: High (40-60%)

Key Feature: Extreme contrast between sharp logo and chaotic metallic texture on solid color base

---

6. LED MATRIX (数字硬件)

Concept: Digital retro and pixel matrix

Visual Characteristics:

• Base: Black background with glowing dot matrix patterns
• Noise: CRT display artifacts, halftone printing dots
• Texture: Old-school LED billboard, retro computer displays
• Atmosphere: Waves of glowing points creating depth, logo as solid entity
• Mood: Hardcore geek, cyberpunk, retro-futurism

Suitable For: AI computing, Web3, data services, electronic hardware

Saturation: Medium (25-35%)

Key Feature: Simulates vintage digital displays with modern execution

---

Light Styles

7. EDITORIAL PAPER (纸本编辑)

Concept: High-end specialty paper with extreme whitespace

Visual Characteristics:

• Base: Off-white, alabaster, or pearl white (not pure white)
• Noise: High-grade watercolor or rough art paper texture
• Texture: Physical paper tactile suggestion
• Atmosphere: Natural light diffuse reflection, slight warm gray vignette in corners
• Mood: Humanistic, independent magazine aesthetic

Suitable For: Serious, professional, human-centered brands

Saturation: Very low (5%)

---

8. IRIDESCENT FROST (幻彩透砂)

Concept: Minimal tech with optical material beauty

Visual Characteristics:

• Base: Extremely light silver-gray or cold white
• Noise: Extremely fine micro noise
• Texture: High-density frosted glass or sandblasted aluminum
• Atmosphere: Soft holographic/iridescent colors (light purple, light blue, soft pink) through thick frosted glass
• Mood: Apple hardware render quality, lightweight, optical

Suitable For: Tech products, hardware, scientific applications

Saturation: Medium (25%)

---

9. MORNING AURA (晨雾光域)

Concept: AI softness with approachability

Visual Characteristics:

• Base: Warm ivory or extremely light cream color
• Noise: Soft noise blending into base like morning mist or dust
• Texture: Thin layer of atmospheric haze
• Atmosphere: Large area blurred low-saturation pastel colors (mint green, baby blue, dawn orange) dissolving into warm white
• Mood: Warm, intelligent, pressure-free

Suitable For: User-friendly AI, accessible products

Saturation: Low (15%)

---

10. CLINICAL STUDIO (无菌影棚)

Concept: Spatial order with high contrast

Visual Characteristics:

• Base: Pure white or extremely light cold gray
• Noise: High-frequency sharp cold-toned digital micro noise
• Texture: Enhanced sharpness
• Atmosphere: Pure light/shadow structure - large softbox from top/side creating smooth gray-white gradient
• Mood: Sterile space, geometric order, 3D depth in 2D

Suitable For: Algorithm-driven, data-centric, confident brands

Saturation: Minimal (2%)

---

11. UI CONTAINER (容器化界面)

Concept: Digital product native feel with micro-depth

Visual Characteristics:

• Base: Clean gradient or solid color background
• Noise: Minimal digital noise
• Texture: Frosted glass container (like app icon base), subtle depth illusion
• Atmosphere: UI-native presentation - rounded corners, transparency, micro-shadows
• Mood: Interactive, product-ready, digital asset quality

Suitable For: Digital products, apps, SaaS platforms, UI/UX focused brands

Saturation: Low to Medium (10-20%)

Key Feature: Logo sits in a transparent container suggesting interactivity and digital product context

---

12. SWISS FLAT (瑞士扁平)

Concept: Absolute flatness and timeless authority

Visual Characteristics:

• Base: 100% pure solid color - deep vintage green, rich burgundy, or classic navy
• Noise: None - absolute flatness
• Texture: None - pure graphic design
• Atmosphere: Zero gradients, zero effects - just color + shape
• Mood: Extreme confidence, classic authority, environmental/sustainability

Suitable For: Established brands, environmental/sustainable products, classic institutions

Saturation: High but sophisticated (rich, deep colors)

Key Feature: Purest form of graphic design - no tricks, just perfect color and form

---

Style Selection Guide

By Product Type

Infrastructure/Security: THE VOID, FROSTED HORIZON AI/Data Products: FLUID ABYSS, MORNING AURA, LED MATRIX Design Tools: FROSTED HORIZON, EDITORIAL PAPER, UI CONTAINER Hardware/Tech: IRIDESCENT FROST, CLINICAL STUDIO, LED MATRIX Professional Services: STUDIO SPOTLIGHT, EDITORIAL PAPER Creative/Artistic: ANALOG LIQUID Fashion/Lifestyle: EDITORIAL PAPER Digital Products/SaaS: UI CONTAINER, CLINICAL STUDIO Environmental/Classic: SWISS FLAT, EDITORIAL PAPER

By Mood

Cold/Rational: THE VOID, CLINICAL STUDIO, IRIDESCENT FROST, LED MATRIX Warm/Approachable: MORNING AURA, EDITORIAL PAPER, ANALOG LIQUID Dynamic/Fluid: FLUID ABYSS, FROSTED HORIZON, ANALOG LIQUID Professional/Editorial: STUDIO SPOTLIGHT, EDITORIAL PAPER Artistic/Creative: ANALOG LIQUID Digital/Interactive: UI CONTAINER, LED MATRIX Classic/Timeless: SWISS FLAT, EDITORIAL PAPER

By Contrast Level

High Contrast: THE VOID, CLINICAL STUDIO, SWISS FLAT Medium Contrast: FROSTED HORIZON, IRIDESCENT FROST Low Contrast: EDITORIAL PAPER, MORNING AURA

By Visual Complexity

Minimal: THE VOID, SWISS FLAT, CLINICAL STUDIO Moderate: FROSTED HORIZON, IRIDESCENT FROST, EDITORIAL PAPER Complex: ANALOG LIQUID, LED MATRIX, UI CONTAINER

Implementation Notes

All styles emphasize: 1. Restrained saturation - avoiding garish colors (except ANALOG LIQUID and SWISS FLAT which use intentional saturation) 2. Fine noise texture - adding physical quality 3. Micro-typography - small, precise text placement 4. Breathing space - generous negative space around logo 5. Professional finish - high-end presentation quality 6. Adaptive logo color - dark backgrounds use white logos, light backgrounds use black logos

The goal is to create showcase images that look like professional brand identity presentations, not amateur graphics.

New Styles Summary

ANALOG LIQUID: Metallic shimmer textures on solid color base - extreme contrast between chaotic organic texture and clean vector logos LED MATRIX: Digital retro with pixel matrix - cyberpunk and retro-futurism aesthetics UI CONTAINER: Digital product native - frosted glass containers suggesting interactivity SWISS FLAT: Absolute flatness - pure graphic design with zero effects, maximum confidence

Logo Design Patterns — Comprehensive Guide

This document is the core design reference for SVG logo generation. It provides detailed design philosophies, concrete SVG implementations, and combination strategies. When generating logos, use this document to ensure variety, quality, and meaningful design.

---

Part 0: Critical Design Principles (READ THIS FIRST)

What Makes a Logo "High-End"?

After analyzing 100+ reference logos, these are the non-negotiable principles:

1. Extreme Simplicity

• Rule: Each logo should have 1-2 core elements maximum
• Bad: 15 hexagons in a grid (too busy, no focal point)
• Good: A single thick circle (Void Circle), or 2 merging nodes (Gooey Nodes)
• Why: Simplicity creates memorability and scalability

2. Generous Negative Space

• Rule: At least 40-50% of the canvas should be empty
• Bad: Elements packed tightly, no breathing room
• Good: Large void at center, elements positioned with intentional gaps
• Why: Negative space is not "wasted space"—it's part of the design

3. Precise Proportions

• Rule: Line weights should be 2.5-4px (in viewBox 0 0 100 100)
• Rule: Dot sizes should be 2-8px radius
• Rule: Spacing between elements should be at least 8-12px
• Bad: strokeWidth="1.5" looks weak, strokeWidth="6" looks clumsy
• Good: strokeWidth="3" or "4" for primary elements, "2" for secondary
• Why: Precision creates professionalism

4. Visual Tension Through Asymmetry

• Rule: Perfect symmetry is boring—introduce intentional imbalance
• Bad: Perfectly centered, perfectly symmetric grid
• Good: Asymmetric dot cluster (heavy bottom-left, light top-right)
• Why: Asymmetry creates visual interest and dynamic energy

5. Restraint Over Decoration

• Rule: Every element must justify its existence
• Bad: Adding gradients, shadows, multiple colors "because we can"
• Good: Pure black on white/light gray, no effects except subtle hover animations
• Why: Restraint signals confidence and sophistication

6. Single Focal Point

• Rule: The eye should know where to look immediately
• Bad: Multiple competing elements of equal visual weight
• Good: One dominant element (large circle, main node cluster, central burst)
• Why: Clear hierarchy guides perception

7. Structural Stability

• Rule: Logos must have visual weight and structural integrity
• Bad: 2-3 thin lines (strokeWidth < 2.5) with no solid mass—feels fragile and weak
• Good: Dense line systems (6-8 lines), solid shapes, or thick strokes (strokeWidth 3-4)
• Why: Structural stability ensures the logo feels grounded and professional
• Exception: If using line systems, use dense repetition (6+ lines) to create visual mass

8. Rounded Negative Space Cuts

• Rule: When using negative space (cutouts/subtractions), openings must be rounded
• Bad: Sharp corners or pointed edges on cutout areas—feels harsh and unfinished
• Good: Circular or rounded-rectangle cutouts with smooth edges
• Why: Rounded cuts feel intentional and refined; sharp cuts feel accidental

Reference Analysis Summary

From analyzing the provided reference images:

09b239bb127ab20616631d72d7fe0e82.jpg (Infinity Loop)

• Single smooth closed path, strokeWidth ~4-5
• Extreme simplicity, pure form
• Lesson: One perfect element beats five mediocre ones

b541c30ccc1e22b83984a22890337437.jpg (Gooey Nodes)

• 2 main nodes + 2-3 small satellites
• Asymmetric placement, organic feel
• Lesson: Use SVG filters (goo effect) for sophistication

282b7bd3919f1b1646e8d8bae149d347.jpg (Radial Burst)

• 8 rays from center, alternating lengths
• Precise geometry, strong focal point
• Lesson: Rhythm through repetition with variation

4221df1d4cbb25fce1d4a54e35cb9d3e.jpg (Punched Circle)

• Solid circle + asymmetric perforation grid
• Negative space as design element
• Lesson: Subtract rather than add

009244dc6bbce8a123f37e332e36be72.jpg (Star Burst)

• Radial lines with gaps forming negative star
• Negative space creates the symbol
• Lesson: What you don't draw is as important as what you do

Design Checklist (Use Before Finalizing)

Before presenting a logo, verify:

• [ ] Element count: 1-2 core elements (max 5-6 total shapes)
• [ ] Negative space: At least 40% of canvas is empty
• [ ] Line weight: Primary elements use strokeWidth 2.5-4
• [ ] Focal point: Clear visual hierarchy, eye knows where to look
• [ ] Asymmetry: Intentional imbalance creates interest
• [ ] Scalability: Works at 16x16 (favicon) and 512x512
• [ ] Restraint: No unnecessary decoration or effects
• [ ] Breathing room: Minimum 8-12px spacing between elements

---

Part 1: Fundamental Design Elements

1.1 Dot Matrix System

Dot matrix is one of the most versatile and SVG-friendly patterns. The key is choosing the right dot shape and arrangement to convey meaning.

Circle Dots — Concentric Ring Layout

Philosophy: Concentric circles radiate outward from a center point, suggesting origin, source, or emanation. The center void creates tension between presence and absence.

Key parameters:

• Ring count: 2-4 rings
• Dots per ring: follows ratio (inner fewer, outer more), e.g., 6 / 12 / 18
• Dot radius: decreasing outward (e.g., 3 → 2.5 → 2) creates depth
• Center: intentionally left empty (negative space)

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="currentColor">
    <!-- Ring 1: 6 dots, radius 15 from center, dot size 3 -->
    <circle cx="50" cy="35" r="3"/>
    <circle cx="62.99" cy="42.5" r="3"/>
    <circle cx="62.99" cy="57.5" r="3"/>
    <circle cx="50" cy="65" r="3"/>
    <circle cx="37.01" cy="57.5" r="3"/>
    <circle cx="37.01" cy="42.5" r="3"/>
    
    <!-- Ring 2: 12 dots, radius 25 from center, dot size 2.5 -->
    <circle cx="50" cy="25" r="2.5"/>
    <circle cx="62.5" cy="28.35" r="2.5"/>
    <circle cx="71.65" cy="37.5" r="2.5"/>
    <circle cx="75" cy="50" r="2.5"/>
    <circle cx="71.65" cy="62.5" r="2.5"/>
    <circle cx="62.5" cy="71.65" r="2.5"/>
    <circle cx="50" cy="75" r="2.5"/>
    <circle cx="37.5" cy="71.65" r="2.5"/>
    <circle cx="28.35" cy="62.5" r="2.5"/>
    <circle cx="25" cy="50" r="2.5"/>
    <circle cx="28.35" cy="37.5" r="2.5"/>
    <circle cx="37.5" cy="28.35" r="2.5"/>
  </g>
</svg>

Suitable for: AI, data platforms, origin/source concepts, scientific tools

Rounded Rectangle Dots — Grid Layout

Philosophy: Rounded rectangles convey modularity and structure. Their softened corners make them friendlier than sharp squares while retaining a sense of order and precision.

Key parameters:

• Grid: typically 3x3, 4x4, or 5x5
• Corner radius: 30-50% of shorter side (too round → circles, too sharp → rigid)
• Spacing: consistent gaps between elements
• Selective removal: remove certain dots to create a recognizable shape or letter

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="currentColor">
    <!-- 4x4 grid of rounded rectangles, some removed to form "L" shape -->
    <!-- Row 1 -->
    <rect x="20" y="15" width="10" height="10" rx="3"/>
    <rect x="35" y="15" width="10" height="10" rx="3"/>
    <!-- Row 2 -->
    <rect x="20" y="30" width="10" height="10" rx="3"/>
    <rect x="35" y="30" width="10" height="10" rx="3"/>
    <!-- Row 3 -->
    <rect x="20" y="45" width="10" height="10" rx="3"/>
    <rect x="35" y="45" width="10" height="10" rx="3"/>
    <!-- Row 4 - full row -->
    <rect x="20" y="60" width="10" height="10" rx="3"/>
    <rect x="35" y="60" width="10" height="10" rx="3"/>
    <rect x="50" y="60" width="10" height="10" rx="3"/>
    <rect x="65" y="60" width="10" height="10" rx="3"/>
  </g>
</svg>

Suitable for: Tech platforms, developer tools, modular systems, dashboard products

Capsule Dots — Path-Aligned Layout

Philosophy: Capsules (elongated rounded rectangles) suggest motion and directionality. When arranged along a curve, they create a sense of flow and progress.

Key parameters:

• Aspect ratio: typically 2:1 to 3:1 (width:height)
• Rotation: each capsule rotates to follow the path tangent
• Size variation: larger near center, smaller at edges
• Spacing: slightly irregular for organic feel

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="currentColor">
    <!-- Capsules flowing along an arc path -->
    <rect x="22" y="62" width="14" height="6" rx="3" transform="rotate(-45, 29, 65)"/>
    <rect x="32" y="50" width="16" height="7" rx="3.5" transform="rotate(-30, 40, 53.5)"/>
    <rect x="43" y="42" width="18" height="8" rx="4" transform="rotate(-10, 52, 46)"/>
    <rect x="57" y="40" width="16" height="7" rx="3.5" transform="rotate(10, 65, 43.5)"/>
    <rect x="68" y="44" width="14" height="6" rx="3" transform="rotate(30, 75, 47)"/>
    <rect x="76" y="52" width="12" height="5" rx="2.5" transform="rotate(50, 82, 54.5)"/>
  </g>
</svg>

Suitable for: Workflow tools, collaboration platforms, streaming/data pipeline products

Hexagon Dots — Honeycomb Layout

Philosophy: Hexagons tessellate perfectly, suggesting efficient organization and distributed networks. Natural and mathematical at the same time.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polygon id="hex" points="5,0 2.5,4.33 -2.5,4.33 -5,0 -2.5,-4.33 2.5,-4.33" fill="currentColor"/>
  </defs>
  <g>
    <!-- Row 1 (offset) -->
    <use href="#hex" x="38" y="30"/>
    <use href="#hex" x="50" y="30"/>
    <use href="#hex" x="62" y="30"/>
    <!-- Row 2 -->
    <use href="#hex" x="32" y="40"/>
    <use href="#hex" x="44" y="40"/>
    <use href="#hex" x="56" y="40"/>
    <use href="#hex" x="68" y="40"/>
    <!-- Row 3 (offset) -->
    <use href="#hex" x="38" y="50"/>
    <use href="#hex" x="50" y="50"/>
    <use href="#hex" x="62" y="50"/>
    <!-- Row 4 -->
    <use href="#hex" x="32" y="60"/>
    <use href="#hex" x="44" y="60"/>
    <use href="#hex" x="56" y="60"/>
    <use href="#hex" x="68" y="60"/>
    <!-- Row 5 (offset) -->
    <use href="#hex" x="38" y="70"/>
    <use href="#hex" x="50" y="70"/>
    <use href="#hex" x="62" y="70"/>
  </g>
</svg>

Suitable for: Distributed systems, blockchain, network infrastructure, community platforms

---

1.2 Geometric Shapes

Circle-Based Compositions

Concentric Rings: Multiple rings of different stroke widths create depth and layering.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="currentColor">
    <circle cx="50" cy="50" r="35" stroke-width="2"/>
    <circle cx="50" cy="50" r="25" stroke-width="1.5"/>
    <circle cx="50" cy="50" r="15" stroke-width="1"/>
    <!-- Accent: filled center dot -->
    <circle cx="50" cy="50" r="4" fill="currentColor" stroke="none"/>
  </g>
</svg>

Arc Segments: Broken circles create dynamism and suggest motion/progress.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <!-- Outer arc: 270 degrees -->
    <path d="M 50 15 A 35 35 0 1 1 15 50"/>
    <!-- Inner arc: 180 degrees, rotated -->
    <path d="M 70 50 A 20 20 0 1 1 30 50"/>
    <!-- Center dot -->
    <circle cx="50" cy="50" r="4" fill="currentColor" stroke="none"/>
  </g>
</svg>

Suitable for: Iteration, cycles, processing, completeness

Boolean Operations — Shape Intersection

Philosophy: When two shapes overlap, the intersection creates a new, unexpected form. This represents synthesis, combination, or the emergence of something new from existing elements.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="circle-clip">
      <circle cx="58" cy="50" r="22"/>
    </clipPath>
  </defs>
  <g fill="currentColor">
    <!-- Left circle outline -->
    <circle cx="42" cy="50" r="22" fill="none" stroke="currentColor" stroke-width="2"/>
    <!-- Right circle outline -->
    <circle cx="58" cy="50" r="22" fill="none" stroke="currentColor" stroke-width="2"/>
    <!-- Intersection area (filled) -->
    <circle cx="42" cy="50" r="22" clip-path="url(#circle-clip)" fill="currentColor" opacity="0.15"/>
  </g>
</svg>

Suitable for: Collaboration, merging, integration platforms, API gateways

Polygon Compositions

Nested Polygons: Shapes within shapes create visual depth.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="currentColor" stroke-width="1.5">
    <!-- Outer hexagon -->
    <polygon points="50,18 76,34 76,66 50,82 24,66 24,34"/>
    <!-- Inner hexagon (rotated 30 degrees) -->
    <polygon points="50,28 67,39 67,61 50,72 33,61 33,39"/>
    <!-- Center triangle -->
    <polygon points="50,38 58,52 42,52" fill="currentColor" stroke="none"/>
  </g>
</svg>

Suitable for: Security, stability, layered systems, frameworks

---

1.3 Line System

Horizontal Line Fill — Circle Mask

Philosophy: Parallel lines filling a circular boundary represent data flow, code structure, or ordered content within a container. Varying line thickness creates emphasis and hierarchy.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="circle-mask">
      <circle cx="50" cy="50" r="32"/>
    </clipPath>
  </defs>
  <!-- Lines clipped to circle -->
  <g clip-path="url(#circle-mask)" stroke="currentColor" stroke-linecap="round">
    <line x1="15" y1="26" x2="85" y2="26" stroke-width="1.5"/>
    <line x1="15" y1="32" x2="85" y2="32" stroke-width="1.5"/>
    <line x1="15" y1="38" x2="85" y2="38" stroke-width="2"/>
    <line x1="15" y1="44" x2="85" y2="44" stroke-width="2"/>
    <line x1="15" y1="50" x2="85" y2="50" stroke-width="2.5"/>
    <line x1="15" y1="56" x2="85" y2="56" stroke-width="2.5"/>
    <line x1="15" y1="62" x2="85" y2="62" stroke-width="2"/>
    <line x1="15" y1="68" x2="85" y2="68" stroke-width="2"/>
    <line x1="15" y1="74" x2="85" y2="74" stroke-width="1.5"/>
  </g>
  <!-- Outer ring (thin, dashed) -->
  <circle cx="50" cy="50" r="36" fill="none" stroke="currentColor" stroke-width="0.8" stroke-dasharray="2 3"/>
</svg>

Suitable for: Code editors, text/content platforms, data processing tools

Wave / Curve System

Philosophy: Waves suggest rhythm, frequency, and continuous motion. Multiple overlapping waves create complexity from simplicity.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="currentColor" stroke-linecap="round">
    <!-- Wave 1: large amplitude -->
    <path d="M 15 50 Q 30 30, 50 50 T 85 50" stroke-width="2.5"/>
    <!-- Wave 2: medium amplitude, offset -->
    <path d="M 15 50 Q 30 40, 50 50 T 85 50" stroke-width="1.8" opacity="0.6" transform="translate(0, -8)"/>
    <!-- Wave 3: small amplitude, opposite offset -->
    <path d="M 15 50 Q 30 44, 50 50 T 85 50" stroke-width="1.2" opacity="0.4" transform="translate(0, 8)"/>
    <!-- Accent dots at key points -->
    <circle cx="15" cy="50" r="2.5" fill="currentColor" stroke="none"/>
    <circle cx="85" cy="50" r="2.5" fill="currentColor" stroke="none"/>
  </g>
</svg>

Suitable for: Audio/music, signal processing, communication, analytics

Spiral / Fibonacci

Philosophy: Spirals represent growth, evolution, and natural order. A mathematical spiral conveys both beauty and precision.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
    <!-- Approximated golden spiral using arcs -->
    <path d="M 50 50 
             A 5 5 0 0 1 55 50 
             A 8 8 0 0 1 55 58 
             A 13 13 0 0 1 42 58 
             A 21 21 0 0 1 42 37 
             A 34 34 0 0 1 76 37"/>
    <!-- Center point -->
    <circle cx="50" cy="50" r="2" fill="currentColor" stroke="none"/>
  </g>
</svg>

Suitable for: Growth, evolution, design tools, creative platforms

---

1.4 Node Network

Basic Topology

Philosophy: Nodes and edges represent connections, relationships, and systems. The hierarchy of node sizes conveys importance, while edge curvature adds elegance.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g>
    <!-- Edges (curved connections) -->
    <path d="M 30 70 Q 50 70, 50 50" stroke="currentColor" stroke-width="2" fill="none"/>
    <path d="M 50 50 Q 50 30, 70 30" stroke="currentColor" stroke-width="2" fill="none"/>
    <path d="M 30 70 Q 20 40, 35 35" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.5"/>
    <path d="M 35 35 Q 50 35, 50 50" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.5"/>
    
    <!-- Primary nodes (large) -->
    <circle cx="30" cy="70" r="5" fill="currentColor"/>
    <circle cx="50" cy="50" r="6" fill="currentColor"/>
    <circle cx="70" cy="30" r="5" fill="currentColor"/>
    
    <!-- Secondary nodes (small, subtle) -->
    <circle cx="35" cy="35" r="2.5" fill="currentColor" opacity="0.4"/>
    <circle cx="65" cy="55" r="2" fill="currentColor" opacity="0.3"/>
  </g>
</svg>

Suitable for: Agent frameworks, network infrastructure, graph databases, social platforms

---

Part 2: Advanced Combination Strategies

2.1 Dot Matrix + Geometric Shape (Filling)

Concept: Use dots to fill a geometric shape. The shape provides structure, the dots provide texture.

Example: Circle dots filling a rounded triangle

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="tri-clip">
      <path d="M 50 20 Q 82 68, 75 72 L 25 72 Q 18 68, 50 20 Z"/>
    </clipPath>
  </defs>
  <g clip-path="url(#tri-clip)" fill="currentColor">
    <!-- Grid of dots, clipped to triangle -->
    <circle cx="50" cy="30" r="2.5"/>
    <circle cx="42" cy="40" r="2.5"/>
    <circle cx="50" cy="40" r="2.5"/>
    <circle cx="58" cy="40" r="2.5"/>
    <circle cx="34" cy="50" r="2.5"/>
    <circle cx="42" cy="50" r="2.5"/>
    <circle cx="50" cy="50" r="2.5"/>
    <circle cx="58" cy="50" r="2.5"/>
    <circle cx="66" cy="50" r="2.5"/>
    <circle cx="28" cy="60" r="2.5"/>
    <circle cx="36" cy="60" r="2.5"/>
    <circle cx="44" cy="60" r="2.5"/>
    <circle cx="52" cy="60" r="2.5"/>
    <circle cx="60" cy="60" r="2.5"/>
    <circle cx="68" cy="60" r="2.5"/>
    <circle cx="30" cy="70" r="2.5"/>
    <circle cx="38" cy="70" r="2.5"/>
    <circle cx="46" cy="70" r="2.5"/>
    <circle cx="54" cy="70" r="2.5"/>
    <circle cx="62" cy="70" r="2.5"/>
    <circle cx="70" cy="70" r="2.5"/>
  </g>
</svg>

2.2 Dot Matrix + Lines (Connected Dots)

Concept: Dots serve as nodes, lines connect them. This combines the discrete nature of dots with the continuity of lines.

Example: Rounded rectangle dots with connecting lines

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g>
    <!-- Connection lines (behind dots) -->
    <line x1="30" y1="35" x2="50" y2="35" stroke="currentColor" stroke-width="1.5"/>
    <line x1="50" y1="35" x2="70" y2="35" stroke="currentColor" stroke-width="1.5"/>
    <line x1="30" y1="50" x2="50" y2="50" stroke="currentColor" stroke-width="1.5"/>
    <line x1="50" y1="50" x2="70" y2="50" stroke="currentColor" stroke-width="1.5"/>
    <line x1="30" y1="65" x2="50" y2="65" stroke="currentColor" stroke-width="1.5"/>
    <line x1="50" y1="65" x2="70" y2="65" stroke="currentColor" stroke-width="1.5"/>
    <!-- Vertical connections -->
    <line x1="30" y1="35" x2="30" y2="65" stroke="currentColor" stroke-width="1"/>
    <line x1="50" y1="35" x2="50" y2="65" stroke="currentColor" stroke-width="1"/>
    <line x1="70" y1="35" x2="70" y2="65" stroke="currentColor" stroke-width="1"/>
    <!-- Diagonal accent -->
    <path d="M 30 35 Q 50 50, 70 65" stroke="currentColor" stroke-width="2" fill="none" stroke-dasharray="4 2"/>
    
    <!-- Rounded rectangle nodes -->
    <rect x="24" y="29" width="12" height="12" rx="3" fill="currentColor"/>
    <rect x="44" y="29" width="12" height="12" rx="3" fill="currentColor"/>
    <rect x="64" y="29" width="12" height="12" rx="3" fill="currentColor"/>
    <rect x="24" y="44" width="12" height="12" rx="3" fill="currentColor" opacity="0.6"/>
    <rect x="44" y="44" width="12" height="12" rx="3" fill="currentColor"/>
    <rect x="64" y="44" width="12" height="12" rx="3" fill="currentColor" opacity="0.6"/>
    <rect x="24" y="59" width="12" height="12" rx="3" fill="currentColor"/>
    <rect x="44" y="59" width="12" height="12" rx="3" fill="currentColor"/>
    <rect x="64" y="59" width="12" height="12" rx="3" fill="currentColor"/>
  </g>
</svg>

2.3 Geometry + Lines (Outlined Shapes)

Concept: Geometric shapes defined by lines rather than fills. This creates an open, technical feel.

Example: Stacked rotating squares with line connections

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="currentColor">
    <!-- Square 1: 0 degrees -->
    <rect x="30" y="30" width="40" height="40" stroke-width="2"/>
    <!-- Square 2: 22.5 degrees -->
    <rect x="30" y="30" width="40" height="40" stroke-width="1.5" transform="rotate(22.5, 50, 50)"/>
    <!-- Square 3: 45 degrees -->
    <rect x="30" y="30" width="40" height="40" stroke-width="1" transform="rotate(45, 50, 50)" opacity="0.6"/>
    <!-- Center accent -->
    <circle cx="50" cy="50" r="3" fill="currentColor" stroke="none"/>
    <!-- Corner dots on outer square -->
    <circle cx="30" cy="30" r="2" fill="currentColor" stroke="none"/>
    <circle cx="70" cy="30" r="2" fill="currentColor" stroke="none"/>
    <circle cx="70" cy="70" r="2" fill="currentColor" stroke="none"/>
    <circle cx="30" cy="70" r="2" fill="currentColor" stroke="none"/>
  </g>
</svg>

2.4 Layered Composition (Background + Foreground)

Concept: A subtle background pattern (low opacity) with a bold foreground element. Creates depth and visual richness.

Example: Dot matrix background with bold geometric foreground

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Background: subtle dot grid -->
  <g fill="currentColor" opacity="0.12">
    <circle cx="20" cy="20" r="1.5"/><circle cx="35" cy="20" r="1.5"/>
    <circle cx="50" cy="20" r="1.5"/><circle cx="65" cy="20" r="1.5"/>
    <circle cx="80" cy="20" r="1.5"/>
    <circle cx="20" cy="35" r="1.5"/><circle cx="35" cy="35" r="1.5"/>
    <circle cx="50" cy="35" r="1.5"/><circle cx="65" cy="35" r="1.5"/>
    <circle cx="80" cy="35" r="1.5"/>
    <circle cx="20" cy="50" r="1.5"/><circle cx="35" cy="50" r="1.5"/>
    <circle cx="65" cy="50" r="1.5"/><circle cx="80" cy="50" r="1.5"/>
    <circle cx="20" cy="65" r="1.5"/><circle cx="35" cy="65" r="1.5"/>
    <circle cx="50" cy="65" r="1.5"/><circle cx="65" cy="65" r="1.5"/>
    <circle cx="80" cy="65" r="1.5"/>
    <circle cx="20" cy="80" r="1.5"/><circle cx="35" cy="80" r="1.5"/>
    <circle cx="50" cy="80" r="1.5"/><circle cx="65" cy="80" r="1.5"/>
    <circle cx="80" cy="80" r="1.5"/>
  </g>
  
  <!-- Foreground: bold circle with inner detail -->
  <g>
    <circle cx="50" cy="50" r="22" fill="none" stroke="currentColor" stroke-width="2.5"/>
    <circle cx="50" cy="50" r="8" fill="currentColor"/>
    <!-- Radiating lines -->
    <line x1="50" y1="28" x2="50" y2="36" stroke="currentColor" stroke-width="2"/>
    <line x1="50" y1="64" x2="50" y2="72" stroke="currentColor" stroke-width="2"/>
    <line x1="28" y1="50" x2="36" y2="50" stroke="currentColor" stroke-width="2"/>
    <line x1="64" y1="50" x2="72" y2="50" stroke="currentColor" stroke-width="2"/>
  </g>
</svg>

---

Part 3: Letter / Symbol Integration

3.1 Geometric Letter Abstraction

Philosophy: Extract the essential geometry from a letter and reconstruct it using pure geometric elements. Don't try to render a full font — instead, capture the structural DNA of the letter.

Example: Letter "P" as geometric construction

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <!-- Vertical stem -->
    <line x1="35" y1="25" x2="35" y2="75"/>
    <!-- Bowl (semicircle) -->
    <path d="M 35 25 L 50 25 A 15 15 0 0 1 50 55 L 35 55"/>
    <!-- Accent: dot at stem base -->
    <circle cx="35" cy="75" r="3" fill="currentColor" stroke="none"/>
  </g>
</svg>

3.2 Dot Matrix Letter

Philosophy: Form a letter using discrete dots. The letter is suggested rather than explicitly drawn, engaging the viewer's pattern recognition.

Example: Letter "N" formed by circle dots

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="currentColor">
    <!-- Left column -->
    <circle cx="30" cy="25" r="3"/><circle cx="30" cy="37" r="3"/>
    <circle cx="30" cy="49" r="3"/><circle cx="30" cy="61" r="3"/>
    <circle cx="30" cy="73" r="3"/>
    <!-- Diagonal -->
    <circle cx="38" cy="33" r="3"/><circle cx="46" cy="41" r="3"/>
    <circle cx="54" cy="49" r="3"/><circle cx="62" cy="57" r="3"/>
    <!-- Right column -->
    <circle cx="70" cy="25" r="3"/><circle cx="70" cy="37" r="3"/>
    <circle cx="70" cy="49" r="3"/><circle cx="70" cy="61" r="3"/>
    <circle cx="70" cy="73" r="3"/>
  </g>
</svg>

---

Part 4: Design Quality Checklist

When generating a logo, verify each design against these criteria:

Visual Quality

• [ ] Balance: Visual weight is distributed evenly (or intentionally asymmetric)
• [ ] Negative space: Empty space is used deliberately, not accidentally
• [ ] Scale: Works at 16x16 (favicon), 64x64 (icon), and 512x512 (full size)
• [ ] Simplicity: No element exists without purpose
• [ ] Distinctiveness: Not easily confused with existing popular logos

Technical Quality

• [ ] viewBox: Uses 0 0 100 100
• [ ] Color: Uses currentColor for fills and strokes
• [ ] Grouping: Related elements are grouped with <g>
• [ ] Reusability: Repeated elements use <defs> and <use>
• [ ] Accessibility: No hardcoded colors

Conceptual Quality

• [ ] Relevance: Design elements connect to product concepts
• [ ] Storytelling: The design has an explainable narrative
• [ ] Uniqueness: Combination of patterns creates something fresh
• [ ] Versatility: Works as app icon, website favicon, social media avatar

---

Part 5: Generation Strategy for 6+ Variants

When creating logos for a project, ensure diversity by following this allocation:

1. Pure geometric (1 variant): Clean shapes, no dots or lines 2. Dot matrix (1 variant): One of the dot types (circle, rounded rect, capsule, hexagon) 3. Line system (1 variant): Lines, curves, or waves 4. Mixed: dots + geometry (1 variant): Dots filling or forming a geometric shape 5. Mixed: lines + geometry (1 variant): Lines creating or accenting geometric forms 6. Node network or layered (1 variant): Multi-element composition

For each variant, vary these dimensions:

• Density: Some sparse, some dense
• Symmetry: Some symmetric, some asymmetric
• Weight: Some bold/heavy, some light/delicate
• Complexity: Some with 2-3 elements, some with 10+

This ensures the user sees genuine variety, not 6 variations of the same idea.

---

Part 6: SVG Implementation Best Practices

Coordinate System

• Always use viewBox="0 0 100 100" — this makes coordinates intuitive (percentages)
• Center most logos around (50, 50) for balanced composition
• Leave at least 10-15 units of padding from edges

Reusable Definitions

<defs>
  <!-- Define once, use many times -->
  <circle id="dot" r="3" fill="currentColor"/>
  <clipPath id="circle-bound">
    <circle cx="50" cy="50" r="35"/>
  </clipPath>
</defs>
<!-- Usage -->
<use href="#dot" x="30" y="40"/>
<use href="#dot" x="50" y="40"/>
<use href="#dot" x="70" y="40"/>

Animation (Web Display Only)

<!-- Subtle rotation -->
<g>
  <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="20s" repeatCount="indefinite"/>
  <!-- ... logo content ... -->
</g>

<!-- Breathing effect (opacity pulse) -->
<circle cx="50" cy="50" r="5">
  <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/>
</circle>

Responsive Color

• Use fill="currentColor" and stroke="currentColor" throughout
• This allows the parent container to control the logo color via CSS color property
• For multi-tone logos, use opacity to create shading (0.1-0.4 for backgrounds, 0.6-0.8 for secondary, 1.0 for primary)

WebGL Dynamic Backgrounds

6 professional WebGL shader-based backgrounds for logo showcases. Each background is fully interactive with mouse tracking and real-time animation.

Background Styles

1. LED Matrix

Visual: High-density 90x90 LED grid with flowing wave animation Color: Adaptive theme (Cyber Blue, Amber, Rust Gold, Crimson, Emerald) Use Case: Tech products, digital services, AI/ML platforms Technical: Fragment shader with grid pattern and sine wave animation

2. Fluid Warping

Visual: Domain warping with Fractional Brownian Motion (FBM) Color: Adaptive theme with 3-color gradient blending Use Case: Creative tools, design software, fluid/organic brands Technical: Multi-layer FBM with mouse interaction and shimmer effects

3. Fabric Wave

Visual: Silk-like undulation with cross-wave patterns Color: Dark gray base (0.08, 0.09, 0.1) with subtle highlights Use Case: Fashion, luxury, textile, premium products Technical: Sine/cosine wave combination with noise sparkles

4. Off-Center Ripple (Corner Ripple)

Visual: Dual ripples emanating from opposite corners Color: Medium gray base (0.16, 0.18, 0.23) Use Case: Asymmetric brands, dynamic products, modern tech Technical: Two exponential decay ripples with different frequencies

5. Holographic Dispersion

Visual: Iridescent fluid with RGB chromatic aberration Color: Dark titanium base with subtle color shifts Use Case: Premium tech, optical products, holographic brands Technical: Palette-based color mapping with dispersion effect Key Feature: RGB channel separation creates prism-like color dispersion

6. Spiral Vortex

Visual: Rotating spiral with angular momentum Color: Light gray base (0.91, 0.92, 0.93) with color bands Use Case: Motion-focused brands, rotation/cycle concepts, energy Technical: Polar coordinate transformation with spiral distortion

Technical Implementation

Shader Structure

All backgrounds use WebGL fragment shaders with:

• u_resolution: Canvas dimensions
• u_time: Animation time
• u_mouse: Mouse position (0-1 normalized)
• Custom uniforms for colors (LED Matrix, Fluid Warping)

Adaptive Color System

LED Matrix and Fluid Warping use seed-based theme selection:

function getAdaptiveTheme(seed) {
    const themes = [
        { dark: [0.02, 0.03, 0.05], bright: [0.15, 0.4, 0.8] },  // Cyber Blue
        { dark: [0.04, 0.015, 0.0], bright: [0.8, 0.3, 0.0] },   // Amber
        { dark: [0.1, 0.03, 0.0], bright: [0.85, 0.35, 0.1] },   // Rust Gold
        { dark: [0.02, 0.01, 0.03], bright: [0.7, 0.05, 0.05] }, // Crimson
        { dark: [0.0, 0.05, 0.03], bright: [0.1, 0.6, 0.4] },    // Emerald
    ];
    return themes[seed % themes.length];
}

Mouse Interaction

All backgrounds respond to mouse movement:

• Ripple effects emanate from cursor
• Fluid distortion follows mouse position
• Exponential decay for natural feel

Performance

• 60 FPS target on modern hardware
• Efficient shader compilation
• Automatic canvas resize with device pixel ratio
• RequestAnimationFrame for smooth animation

Usage in Logo Showcase

When to Use Each Style

LED Matrix: Digital products, SaaS platforms, AI tools, blockchain Fluid Warping: Creative software, design tools, artistic brands Fabric Wave: Fashion, textiles, luxury goods, premium services Off-Center Ripple: Modern tech, asymmetric designs, dynamic brands Holographic Dispersion: Optical tech, premium electronics, holographic products Spiral Vortex: Motion/energy brands, circular concepts, rotation themes

Logo Color Recommendations

Dark backgrounds (LED Matrix, Fluid Warping, Fabric Wave, Off-Center, Dispersion):

• Use white or very light logos (#FFFFFF, #F5F5F5)
• Ensure high contrast for readability

Light backgrounds (Spiral Vortex):

• Use black or very dark logos (#000000, #1A1A1A)
• Maintain strong contrast

Integration with Showcase Webpage

The background library provides: 1. Thumbnail view: 6 cards in grid layout (16:9 aspect ratio) 2. Fullscreen mode: Click any card to expand 3. Interactive preview: Mouse tracking in both modes 4. Logo overlay: Centered logo on each background 5. Metadata display: Style name and technical details

File Structure

logo-generator/
├── references/
│   └── webgl_backgrounds.md          # This file
├── assets/
│   └── background_library.html       # Interactive showcase
└── scripts/
    └── generate_showcase_webpage.py  # Webpage generator

Code Reference

Full shader implementations available in:

• /Users/guohao/Documents/code/new-skill/background_library_v2.html

Each shader is ~30-60 lines of GLSL code with detailed comments.