@eliosai/branding

The Elios logo mark - a hand-drawn 12-petal flower - as production SVG assets, split petals for animation, and animation demos.

Assets

| File | Use | | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | assets/elios-logo-mark.svg | The logo. Tight crop (viewBox="145 63 814 814"), fill="currentColor" - recolors via CSS color. Inline it. | | assets/elios-logo-mark-yellow.svg | Same shape, hardcoded #FACC15 - for <img> tags where CSS can't reach inside. | | assets/elios-logo-mark-1024.svg | Archive: 1:1 with the canonical PNG framing (viewBox="0 0 1024 1024"), white fill. Base for the petal split. | | assets/petals/petal-01.svg … petal-12.svg | One petal each, numbered clockwise from the top. All share the 1024 viewBox, so stacking all 12 reproduces the mark exactly. | | assets/petals/elios-logo-mark-split.svg | Full mark with each petal as <g class="po"><path class="petal">, carrying CSS vars --i (clockwise index 0-11) and --dx/--dy (unit vector outward from the flower center). Ready for per-petal animation. | | assets/petals/petals.json | Same data for JS/TS (also exported by index.ts). | | assets/ascii/elios-logo-{24,32,40,64,88}-cyber.txt | The CLI logo. Glyph-density art with lighting - petals glow from their core, rays fade outward, ordered dither adds shimmer. Width in columns; 40+ recommended, 24 is the legibility floor. | | assets/ascii/elios-logo-{24,32,40,64,88}.txt | Plain coverage-ramp ASCII ( .:-=+*#%@) - minimal, uniform fill. | | assets/ascii/elios-logo-{24,32,40,64,88}-blocks.txt | Unicode half-block rendition - solid silhouette. | | assets/ascii/ascii.json | All ASCII variants as JSON (also exported by index.ts as asciiVariants / asciiLogo()). | | assets/source/elios-new-logo.png | Canonical raster the SVG was traced from (1024², checkerboard baked in, no alpha). | | assets/source/2026-05-02-105629_hyprshot.png | Black-background render used to resolve the PNG's blind spots during tracing. |

Provenance: traced from the canonical PNG at sub-pixel accuracy (ink ratio 1.0000 against its reliable pixels, balanced 652/650 px boundary noise). The wobbles and the small cleft on the top petal are genuine artwork, not artifacts.

Animating petals - the two rules

1. Petal <path>/<g> elements rotate/scale around the flower center, (542, 518) in viewBox coordinates:

   .po,
   .petal {
     transform-box: view-box;
     transform-origin: 542px 518px;
   }

2. The outer <svg> must use a percentage origin instead - transform-origin: 52.96% 50.61%. Pixel origins on the outer element are measured against its rendered box and will fling the mark off-screen.

Translate values inside the SVG are in viewBox units (1024 wide), not screen px.

ASCII logo (CLI banners)

Generated by scripts/gen_ascii.py directly from the traced petal paths - verified against an SVG raster render (mean per-cell coverage diff ≤ 0.4%), so the silhouette is 1:1 with the SVG/PNG. Sized for 1:2 terminal cells.

The cyber style is the brand look: per-cell brightness = exact coverage × interior depth × radial sun-glow from the flower center, quantized through the glyph ramp .·:;~=+*xoX%#&@ with 4×4 Bayer dithering. Coverage still gates every cell, so the silhouette stays exact - only the interior tone varies.

At 24 and 32 cols the cyber style switches to braille dots: whole characters can't resolve the hand-drawn mark at that size, but braille glyphs pack a 2×4 dot grid into each cell - so a 24-col render draws the true outline on a 48×48 square-dot canvas (verified 0.999 dot-IoU against the SVG render). Same shape at every size, just finer chars.

Rust - embed at compile time, print in brand yellow:

const LOGO: &str = include_str!("../assets/ascii/elios-logo-40-cyber.txt");

fn banner() {
    // #FACC15 brand yellow (truecolor); falls back fine on no-color pipes
    println!("\x1b[38;2;250;204;21m{LOGO}\x1b[0m");
}

Web - same art via the package:

import { asciiLogo } from "@eliosai/branding";
pre.textContent = asciiLogo(64); // largest cyber variant fitting 64 cols

The .txt files have trailing whitespace stripped and a final newline - safe to embed, cat, or diff.

Demos

Self-contained HTML, open directly in a browser:

• ../../prototypes/branding/hover-animations.html - 19 hover variants (Magnet, Sunbeam, Bloom with speed/direction controls, combos, …). Hover requires the SVG inlined in HTML.
• ../../prototypes/branding/loaders.html - 6 continuous loaders (Eternal bloom, Comet sweep, Supernova, …) + terminal spinner frames for the CLI.

Scripts

scripts/gen_hover.py and scripts/gen_loaders.py regenerate the demos, and scripts/gen_ascii.py the ASCII art, from assets/petals/petals.json (stdlib-only, any python3):

python3 scripts/gen_hover.py && python3 scripts/gen_loaders.py && python3 scripts/gen_ascii.py

scripts/show_ascii.sh previews the ASCII art in the terminal - centered, painted with a light-gold→amber gradient (FLAT=1 for flat brand yellow):

scripts/show_ascii.sh             # every size, cyber style
scripts/show_ascii.sh 64 blocks   # one size; styles: cyber | ascii | blocks | all

The colorized 12-column TUI mark has multiple palettes, a one-shot bloom, and looping waiting animations. Use Ctrl-C to stop an indefinite waiting loop:

python3 scripts/elios_logo12_color.py palettes
python3 scripts/elios_logo12_color.py bloom --speed 2
python3 scripts/elios_logo12_color.py wait --animation twinkle
python3 scripts/elios_logo12_color.py catalog --seconds 1.5