The Sivali logo mark as a live object: the yin-yang S cut from a circle, with the dotted orbit rings turning inside the open half, exactly as the Sivali Corp hero draws it.
Load kits/motion/sivali-mark.js (no dependencies). It exposes window.SivaliMark:
SivaliMark.svg({ ink, size, bg })returns the static mark as an SVG string. Use#39399Bon white orneutral-50,#FFFFFFon indigo or#121212. Exported files:assets/Logos/.SivaliMark.draw(ctx, { t, cx, cy, size, ink, glow, build, spin, mouse })draws one animated frame on a canvas.build0 to 1 flies the dots in and fills the mark (used by the bumper);mousepushes nearby dots away.SivaliMark.mount(canvas, fn, { hold })runs a frame function at device pixel ratio and renders a single still frame when the viewer prefers reduced motion.SivaliMark.lockup({ ink, word })returns the HTML lockup (mark + tracked wordmark) used in the site header and footer.
Rules
- The wordmark is Ubuntu Medium, uppercase, tracked 0.18em, set at about 0.24 of the mark height and spaced 0.18 of the mark height from it.
- Keep the mark round; never recolour the dots separately from the mark, never add gradients inside it.
- Minimum size 24px on screen. Clear space around the mark equals half its diameter.
- On dark grounds the mark may glow (primary-100 halo); on light grounds it never glows.