AeThex-Engine-Core/LOGO_CONFIG_GUIDE.md

# 🎯 Logo Configuration Guide

Control all logos from one file: **[logo-config.toml](logo-config.toml)**

## Quick Start

**1. Edit logos in VS Code:**
```bash
code logo-config.toml
```

**2. Generate logos:**
```bash
python3 tools/generate_from_config.py
```

**3. View results:**
```bash
ls -lh assets/logo*.svg
```

## How It Works

Edit `logo-config.toml` to define logos using simple shapes:

```toml
[[logo]]
name = "my-logo"
output = "assets/my-logo.svg"
width = 200
height = 200

[[logo.elements]]
type = "circle"
cx = 100
cy = 100
r = 50
fill = "#8B5CF6"

[[logo.elements]]
type = "line"
x1 = 50
y1 = 100
x2 = 150
y2 = 100
stroke = "#06B6D4"
stroke-width = 3
```

## Available Shape Types

### Circle
```toml
[[logo.elements]]
type = "circle"
cx = 100        # center X
cy = 100        # center Y
r = 30          # radius
fill = "#8B5CF6"
stroke = "#06B6D4"
stroke-width = 2
```

### Rectangle
```toml
[[logo.elements]]
type = "rect"
x = 50          # top-left X
y = 50          # top-left Y
width = 100
height = 60
rx = 10         # rounded corners
fill = "#06B6D4"
```

### Line
```toml
[[logo.elements]]
type = "line"
x1 = 50         # start X
y1 = 50         # start Y
x2 = 150        # end X
y2 = 150        # end Y
stroke = "#06B6D4"
stroke-width = 3
stroke-linecap = "round"
```

### Path (Complex Shapes)
```toml
[[logo.elements]]
type = "path"
d = "M 100 50 L 130 150 L 70 150 Z"  # SVG path commands
fill = "#8B5CF6"
stroke = "none"
```

### Polygon
```toml
[[logo.elements]]
type = "polygon"
points = "100,30 160,65 160,135 100,170"
fill = "none"
stroke = "#8B5CF6"
stroke-width = 3
```

### Text
```toml
[[logo.elements]]
type = "text"
x = 100
y = 60
content = "AeThex"
font-family = "Inter, sans-serif"
font-size = 48
font-weight = 800
fill = "#8B5CF6"
```

## Color Reference

Use these brand colors:

```toml
# Purple (Primary)
fill = "#A855F7"  # Light purple
fill = "#8B5CF6"  # Main purple
fill = "#7C3AED"  # Dark purple

# Cyan (Accent)
fill = "#06B6D4"  # Main cyan
fill = "#22D3EE"  # Light cyan

# Gradients
fill = "url(#grad1)"      # Purple gradient
fill = "url(#textGrad)"   # Purple to cyan
```

## Effects

### Glow Effect
```toml
[[logo.elements]]
type = "circle"
cx = 100
cy = 100
r = 10
fill = "#22D3EE"
filter = "glow"
```

### Opacity
```toml
[[logo.elements]]
type = "line"
x1 = 50
y1 = 100
x2 = 150
y2 = 100
stroke = "#06B6D4"
opacity = 0.4
```

## Multiple Logos in One File

Create multiple logos at once:

```toml
# Logo 1
[[logo]]
name = "square"
output = "assets/logo-square.svg"
width = 200
height = 200

[[logo.elements]]
type = "rect"
x = 50
y = 50
width = 100
height = 100
fill = "#8B5CF6"

# Logo 2
[[logo]]
name = "circle"
output = "assets/logo-circle.svg"
width = 200
height = 200

[[logo.elements]]
type = "circle"
cx = 100
cy = 100
r = 50
fill = "#06B6D4"
```

## Coordinate System

- Origin (0, 0) is **top-left corner**
- X increases to the **right**
- Y increases **downward**
- For 200×200 canvas, center is (100, 100)

```
(0,0) -------- (200,0)
  |              |
  |   (100,100)  |  ← Center
  |              |
(0,200) ------ (200,200)
```

## Tips for Perfect Alignment

### 1. Use Center as Reference
```toml
# For 200×200 canvas
width = 200
height = 200

# Center circle
[[logo.elements]]
type = "circle"
cx = 100  # width / 2
cy = 100  # height / 2
r = 50
```

### 2. Snap to Grid
```toml
# Use multiples of 10 for clean coordinates
x = 50   # ✅ Clean
x = 47   # ❌ Awkward

# Or multiples of 5
x = 55   # ✅ Still clean
```

### 3. Calculate Positions
```python
# For symmetrical elements around center
center = 100
offset = 30

left_x = center - offset   # 70
right_x = center + offset  # 130
```

## Current Logos

The config file includes 5 pre-configured logos:

1. **main-logo** → `assets/logo.svg`  
   - Letter A with connection nodes
   - 200×200px

2. **icon** → `assets/logo-icon.svg`  
   - App icon with background
   - 120×120px with rounded corners

3. **horizontal** → `assets/logo-horizontal.svg`  
   - Logo + "AeThex" text
   - 500×120px

4. **triangle** → `assets/logo-triangle.svg`  
   - Minimal triangle design
   - 200×200px

5. **hexagon** → `assets/logo-hexagon.svg`  
   - Network hexagon
   - 200×200px

## Workflow

### Modify Existing Logo
```bash
# 1. Open config
code logo-config.toml

# 2. Find the [[logo]] section you want to edit
# 3. Change colors, positions, sizes

# 4. Regenerate
python3 tools/generate_from_config.py

# 5. Preview
firefox assets/logo.svg  # or your browser
```

### Add New Logo
```toml
# At the end of logo-config.toml, add:
[[logo]]
name = "my-new-logo"
output = "assets/my-new-logo.svg"
width = 200
height = 200

[[logo.elements]]
type = "circle"
cx = 100
cy = 100
r = 80
fill = "#8B5CF6"
```

Then regenerate:
```bash
python3 tools/generate_from_config.py
```

### Experiment Quickly
1. Change a single number (e.g., `cx = 100` → `cx = 120`)
2. Save file (Ctrl+S)
3. Run generator
4. View result
5. Repeat until perfect

## Common Patterns

### Letter A Shape
```toml
# Left stroke
[[logo.elements]]
type = "path"
d = "M 100 50 L 65 150 L 77 150 L 92 105 Z"
fill = "#8B5CF6"

# Right stroke
[[logo.elements]]
type = "path"
d = "M 100 50 L 135 150 L 123 150 L 108 105 Z"
fill = "#8B5CF6"

# Crossbar
[[logo.elements]]
type = "line"
x1 = 80
y1 = 105
x2 = 120
y2 = 105
stroke = "#06B6D4"
stroke-width = 4
```

### Connection Nodes
```toml
# Line
[[logo.elements]]
type = "line"
x1 = 70
y1 = 100
x2 = 130
y2 = 100
stroke = "#06B6D4"
stroke-width = 2

# Node at each end
[[logo.elements]]
type = "circle"
cx = 70
cy = 100
r = 4
fill = "#22D3EE"

[[logo.elements]]
type = "circle"
cx = 130
cy = 100
r = 4
fill = "#22D3EE"
```

### Hexagon
```toml
[[logo.elements]]
type = "polygon"
points = "100,30 160,65 160,135 100,170 40,135 40,65"
fill = "none"
stroke = "#8B5CF6"
stroke-width = 3
```

## Troubleshooting

### Logo looks off-center
- Check that elements are positioned relative to canvas center
- For 200×200: center is (100, 100)
- For 400×400: center is (200, 200)

### Colors not showing
- Make sure fill/stroke values are valid hex codes
- Use quotes: `fill = "#8B5CF6"` not `fill = #8B5CF6`

### Elements not appearing
- Check coordinates are within canvas bounds
- If x=300 on 200×200 canvas, it's off-screen
- Verify spelling of type (e.g., "circle" not "cirlce")

### Gradients not working
- Use `fill = "url(#grad1)"` not `fill = "#grad1"`
- Available gradients: grad1, textGrad (defined automatically)

## Advanced: Create Custom Gradient

Edit `tools/generate_from_config.py` and add to `create_svg_defs()`:

```python
def create_svg_defs():
    return '''  <defs>
    <!-- Existing gradients... -->
    
    <linearGradient id="myGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#FF0000"/>
      <stop offset="100%" style="stop-color:#0000FF"/>
    </linearGradient>
  </defs>
'''
```

Then use in config:
```toml
fill = "url(#myGrad)"
```

## Export to PNG

After generating SVG:

```bash
# Convert with ImageMagick
convert assets/logo.svg -resize 512x512 assets/logo-512.png
convert assets/logo.svg -resize 256x256 assets/logo-256.png
convert assets/logo.svg -resize 128x128 assets/logo-128.png

# Or with Inkscape (higher quality)
inkscape assets/logo.svg --export-filename=assets/logo-512.png --export-width=512
```

## Summary

**Edit:** [logo-config.toml](logo-config.toml) in VS Code  
**Generate:** `python3 tools/generate_from_config.py`  
**Preview:** Open `assets/logo.svg` in browser

All logos defined in one place, regenerate anytime with one command! 🎨