# VEEHIVE logo master
The VEEHIVE Tuning logo as a clean, layered vector, traced (not redrawn) from the brand's own artwork.
Two versions, both with identical geometry:
| Version | Use on | Hexagons, accents, bars | Wordmark, TUNING, needle, ticks |
|---|---|---|---|
| **light** | white and light backgrounds | yellow `#FFFF00` | black `#000000` |
| **dark** | black and dark backgrounds (identical to the original) | yellow `#FFFF00` | white `#FFFFFF` |
The needle's small pivot dot is yellow in both versions, as in the original.
## Files
```
svg/
veehive-logo-light.svg layered master, light version (named groups, one path per part)
veehive-logo-dark.svg layered master, dark version
veehive-logo-light.min.svg minified web version (3 paths, about 4.5 KB) for or inline use
veehive-logo-dark.min.svg minified web version, dark
png/light/ veehive-logo-light-512.png, -1024, -2048, -4096 transparent, width in px
png/dark/ veehive-logo-dark-512.png, -1024, -2048, -4096 transparent, width in px
favicon/light/ and favicon/dark/
favicon.svg the mark (middle hexagon dial) as a vector
favicon.ico 16, 32 and 48 px in one file
favicon-16/32/48/96/192/512.png transparent PNGs
apple-touch-icon.png 180 px, solid background (white for light, #0B0B0B for dark)
demo/
index.html animation proof (self-contained, both versions)
veehive-logo-animation.mp4 1080 x 1080, 60 fps recording of the demo
veehive-logo-animation.gif 540 px, 30 fps
review/ 400% side-by-side comparison panels (original, Canva master, new vector, outline check)
veehive-logo-master.zip svg, png, favicon, demo and this README in one download
_build/ the scripts that made everything (trace.py, build_svg.py, export.mjs, review.py ...)
_src/ working files and source exports
```
All logo SVGs and PNGs use the same frame as the website's `veehive-logo.png` (888 x 508, same padding),
so the new files drop in where the old one is used without anything moving.
Favicon HTML:
```html
```
## Layer ids (master SVGs and Figma)
```
logo
emblem
hex-left > hex-left-shape
hex-right > hex-right-shape
hex-middle > hex-middle-shape the dial ring, open where the accents sit
accents > accent-1 .. accent-4 the dashes breaking the middle ring (1-2 bottom side, 3-4 lower-right side)
ticks > tick-1 .. tick-5 clockwise from 9 o'clock: left, upper-left, upper-right, right, lower-left
needle > needle-blade, needle-hub, needle-pivot (yellow dot), needle-pivot-point (invisible marker)
wordmark > wordmark-v1, wordmark-e1, wordmark-e2, wordmark-h, wordmark-i, wordmark-v2, wordmark-e3
tuning > tuning-t, tuning-u, tuning-n1, tuning-i, tuning-n2, tuning-g
bars-left > bar-left-1 .. bar-left-7 numbered left to right
bars-right > bar-right-1 .. bar-right-7 numbered left to right
```
- **Needle pivot:** x 441.653, y 122.758 (the exact centre of the middle hexagon). The `needle` group carries
`data-pivot-x`, `data-pivot-y`, `data-rest-angle` (-139.15 degrees: 0 points right, clockwise positive) and a ready-made
`transform-origin`, so `transform: rotate(...)` on `#needle` turns it about the pivot.
- **Draw-on guides:** `` holds `guide-hex-left`, `guide-hex-middle`, `guide-hex-right`: the centre-line of each
hexagon with its ring width in `data-ring-width`. Stroke one inside a mask to draw a hexagon on (see `demo/index.html`).
- The side hexagons continue 3 px underneath the middle ring so no hairline shows at the joins. Keep `hex-middle` above them.
- Colours are set once per group (`fill` on the group), so recolouring is two values: yellow and ink.
## Figma
"VEEHIVE Logo Master": https://www.figma.com/design/93Hv83kImIDfIuLt37ROuz
Components `VEEHIVE Logo / Light` and `VEEHIVE Logo / Dark`, layers named exactly as above, plus preview frames on white and black.
## How it was traced, and how close it is
- No generative AI touched the logo. Shapes were measured from pixels and fitted as geometry.
- Every available source is a raster, so the trace is sub-pixel edge fitting, not an auto-trace of blur:
- the website original `veehive-logo.png` (888 x 508, soft edges from background removal), and
- the crisp 800 x 443 image embedded in the Canva design (page 1 and 2 use the same image; Canva tints it black on page 1).
- What the measurements showed: the three hexagons are perfectly regular (edges at exactly 0, 60 and 120 degrees, within 0.04 px);
the wordmark stems lean at exactly 80 degrees; repeated letters (V, E, N) are identical to within 0.03 to 0.15 px and were
averaged; the yellow is pure `#FFFF00` in the Canva master (the website PNG reads `#FFFE04` to `#FDFD18` because of recompression).
- Cleaning applied: straight edges are true lines, corners are sharp where the artwork is sharp, the rounded corners of TUNING
are true smooth fillets, the bars share one top and bottom line (largest change 0.11 px), the tick marks share one stroke width.
- **Against the Canva master (crisp):** rendered at the same size, 99.93% of pixels are within 10% of the source and no pixel
differs by more than 24% (those are single anti-aliased edge pixels). Run `_build/verify.py` to repeat the check.
- **Against the website PNG:** the layout is the same artwork at one uniform scale (1.0366) with no shift between parts larger than
0.2 px. The website PNG's edges are soft and sit about a quarter of a pixel inside the true outline, and its ticks are faint,
so the vector looks slightly crisper and the ticks read more clearly. That is the only visible difference.
- The needle tip is a narrow blunt tip (0.8 px wide at this size), as in the artwork.
## Rebuilding
From `_build/`: `python trace.py` (measure), `python build_svg.py` (SVGs), `node export.mjs` (PNGs and favicons),
`python review.py` (comparison panels), `python build_demo.py` then `node record.mjs` (demo, mp4, gif), `python verify.py` (pixel check).