Resonance Logo — the Qalarc mark, drawn by two planets

The story

How two planets draw a flower

There's a piece of geometry hiding in the solar system that people have been quietly delighted by for centuries. The Qalarc mark is that geometry, measured and drawn honestly — nothing added, nothing faked.

Venus and Earth are almost in step. Venus goes around the sun in about 224.7 days; Earth takes 365.3. That ratio is very nearly 13:8 — thirteen Venus years for every eight of ours. "Almost, but not quite" is exactly what makes it beautiful.

Connect them with a line, every few days. Draw Earth where it is, draw Venus where it is, and join the two with a single straight chord. Do that over and over as both planets move. Each chord is trivial; it's the accumulation that matters.

After eight years, the chords have woven a five-petalled rose. Venus laps Earth to line up between us and the sun five times per eight-year cycle — five inferior conjunctions, spaced 72° apart around the sky. Those five points are the tips of a pentagram; the weave between them is the famous Pentagram of Venus.

The mark clips the drawing at Venus's orbit. The circular edge of the logo isn't a decorative frame — it is Venus's path around the sun. Everything you see lives inside that disc: the interior weave, where the chords cross most densely.

Five eyes sit where the weave is densest. Where the chords pile up, the drawing brightens into five knots. The eyes are placed there — at 23.25° + 72°·k, at radius 0.417 of Venus's orbit — computed from the actual chord density, not positioned by taste. Each is line-work: woven lids and concentric iris arcs, so the eyes grow out of the mandala rather than sitting on top of it.

Qalarc — the mark is literally made of thousands of arcs; every chord is one step along an orbital arc, and the whole logo is what those arcs add up to. It plays well with the idea of an arc: a curve, a path, a piece of a circle traced out over time.

Live

The mark at every size

The same generator drives the logo from a hero canvas down to a 16px favicon. Below are live mounts — each is running the real animation, not an image.

120 px · reference
43-year weave

64 px · 15 yr
sparse

32 px · 15 yr
sparse

vesica eyes
meeting at centre

on light
darker chords

Implementation

How it's built

Two implementations of one idea. A live canvas 2D animation for the web, and a deterministic Python/PIL pipeline that bakes the same maths into every static icon. Honest, reproducible, no hand-tuned pixels.

The animation

A single <canvas> plus a persistent offscreen "trail" buffer. Chords are drawn once and accumulate into the trail — they're never redrawn, so the weave builds up additively like ink on paper. Planet positions use the true sidereal periods (224.701 / 365.256 days); a chord is drawn every 4 simulated days, for 43 years, then a short finale draws the five eyes.

Loop: draw → hold (slow rotation of the finished mark) → fade → restart.
Size-adaptive: below 80px it drops to a sparser 15-year rose, and chord density / alpha / line-weight scale down so tiny canvases stay crisp instead of washing to a pale blob.
Reduced-motion: honours prefers-reduced-motion — no animation, it just renders the finished poster.
Self-contained: no dependencies, no WebGL, one file, resizes with its container via ResizeObserver.

The component — two-line embed

<!-- 1. include the script -->
<script src="/assets/js/qalarc-spinner.js"></script>

<!-- 2. mount it on any element -->
<script>
  QalarcSpinner.mount(el, {
    clip: 'venus', finale: true,
    years: 43, eyes: 'lobe', duration: 6000
  });
</script>

Option	Default	What it does
clip	`'none'`	`'venus'` crops the view to Venus's orbit disc — only the interior weave shows.
finale	`false`	After the weave completes, bloom the five line-drawn mandala eyes.
eyes	`'lobe'`	`'lobe'` = eyes nested in the density knots · `'vesica'` = radial almond eyes meeting at the centre.
years	`43`	How many Earth-years of weave to draw. Fewer years = sparser rose (auto-drops to 15 below 80px).
duration	`6000`	Draw time in ms for one full loop.
holdMs	`1000`	How long to hold (slow-rotate) the finished mark before fading.
rotate	`true`	Slow rotation during the hold phase.
color / colorEnd	`lav → mint`	Chord colour ramp (by angle). Set darker values for light backgrounds.
eyeColor	`cream`	Colour of the line-drawn eyes.

API: QalarcSpinner.mount(el, opts) → instance · QalarcSpinner.unmount(el). One spinner per element.

The favicon pipeline

The static icon set is a faithful Python + PIL re-implementation of the same chord maths — so the favicon is the same object as the animation, just frozen. It renders at 4× supersampling then downsamples for clean edges.

Size-adaptive years: 43-year density at 128px+, dropping to a 15-year sparse rose below 128px.
Contrast curve for small sizes: a density tone-curve (gamma up to ~2.6 for the tiniest icons) keeps dark plum showing through the weave, so petals read instead of washing to a flat blob.
Eyes on at 16px: below 48px the five cream nodes are the identity — they're forced on and brightened, because at that scale the eyes are the only thing the eye can resolve.
Deterministic output: emits the full favicon / PWA / Apple-touch / OG set from one run, byte-stable — same input, same pixels, every time.

gen_resonance_logo.py

The SVG mark family — line, duotone, petals, wordmark lockups, favicon — plus the design-review page. The source of truth for the geometry.

gen_favicons.py

The raster pipeline: 4× supersampled PIL render, size profiles, contrast curves, and the full deterministic icon / PWA / OG set.

qalarc-spinner.js

The live web component. Zero dependencies, canvas 2D, persistent trail, size-adaptive, reduced-motion aware.

Everything here is reproducible from source: scripts/gen_resonance_logo.py and scripts/gen_favicons.py. The full design evolution — every round, plus the interactive spinner lab — is archived at /branding/.

Drawn by two planets