One logo everywhere: the Oxygen molecule with its arms (they are never drawn today) issue #306 closed: completed andymccall opened this 10 days ago · 0 comments

Andy (2026-10-25): we seem to have two logos, the Oxygen molecule (two rings joined by two arms, as on the new Android icon) and the web's two rings without arms. Standardise on the molecule, and animate the arms back and forth beside the rings' turning while a page loads.

Why the web has no arms: it is the same SVG everywhere (header, footer, the wait mark cloned from the header, /favicon.svg from assets/icons/oxygenhub.svg, assets/icons/mark.svg), and the arms are in it: two horizontal lines (M -11 ±6 L 11 ±6) stroked with url(#oxyGrad…). The gradient uses the default gradientUnits="objectBoundingBox", and a horizontal line's bounding box has no height; SVG says a gradient on a box with no width or height is not painted, so the arms vanish in every browser. The Android icon gives its gradient user-space coordinates, which is why its arms show.

Fix: gradientUnits="userSpaceOnUse" with coordinates across the mark (x1=-22 y1=-11 x2=22 y2=11 in its -24..24 by -12..12 box) in base.html (header and footer), assets/icons/mark.svg, assets/icons/oxygenhub.svg (favicon), and anything that inlines it; the wait animation (.oxy-wait, style.css): the rings as now, and the arms sliding back and forth in turn (top one way, bottom the other), with reduced motion still static; check the backdrop's mark scene (crates/backdrop), the mail logo (assets/icons/oxygenhub-mail.png, a raster: re-render), the VS Code extensions' logos (oxygen-vscode assets/images/oxygen.svg, oxygenhub-vscode assets/images/oxygenhub.svg), and oxygenhub-android's in-app mark (res/drawable/mark.xml, whose arms have no stroke colour at all).