AeThex-Labs/AeThex-Engine-Core
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2
AeThex-Engine-Core/LOGO_CONFIG_GUIDE.md

7.4 KiB
Raw Permalink Blame History

🎯 Logo Configuration Guide

Control all logos from one file: logo-config.toml

Quick Start

1. Edit logos in VS Code:

code logo-config.toml

2. Generate logos:

python3 tools/generate_from_config.py

3. View results:

ls -lh assets/logo*.svg

How It Works

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

[[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

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

Rectangle

[[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

[[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)

[[logo.elements]]
type = "path"
d = "M 100 50 L 130 150 L 70 150 Z"  # SVG path commands
fill = "#8B5CF6"
stroke = "none"

Polygon

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

Text

[[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:

# 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

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

Opacity

[[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:

# 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

# 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

# Use multiples of 10 for clean coordinates
x = 50   # ✅ Clean
x = 47   # ❌ Awkward

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

3. Calculate Positions

# 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

# 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

# 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:

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

# 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

# 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

[[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():

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:

fill = "url(#myGrad)"

Export to PNG

After generating SVG:

# 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 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! 🎨