The Story Behind own.audio's Logo

Every page on this site has the same small mark in the top-left corner — a violet center, two thin arcs, five colored dots turned outward. It’s the same mark in the browser tab (the favicon), the same one behind the social-preview image when a link gets shared, and it’ll be the same one on the app icon whenever there’s an app to put it on. It’s easy to glance past as decoration. It isn’t. Every piece means something specific, and none of it is arbitrary.

This post pulls the mark apart into its three pieces, explains what each one is doing, and shows them live — the actual animated SVG, not a screenshot of it.

The center: a heartbeat, not just a dot

The violet circle in the middle is the thing everyone in the mark is gathered around — the shared library, the shared listening, the shared thing that makes a household one household instead of several people who happen to live together. It doesn’t sit still. It pulses, small and continuous, the way a heartbeat does rather than the way a notification badge does.

The center, on its own. At the speed it actually runs at in the real mark, it happens to land at roughly seventy-five beats a minute — close to a real resting heartbeat, though that was a happy coincidence of tuning the motion to feel right, not a number picked on purpose.

The arcs: the music, moving outward

Two thin lines curve out from the center and slowly turn, like ripples that never finish spreading. They’re the sound itself — not a specific waveform, just the idea that something audible is coming from the center and moving outward, continuously, the way music actually behaves rather than the way a static “play” icon does.

The two arcs, on their own — one bolder, one fainter, both turning at the same slow, constant speed.

The five: a family, dancing in a circle

Five small figures — each one a head and two shoulders — stand in a ring around the center, facing outward, and gently sway: rotating a few degrees one way, then the other, growing slightly and shrinking slightly as they go. It’s meant to read as a family dancing in a circle, not posing for a photo. Five is enough to suggest a household without pinning down exactly who’s in it — parents, kids, grandparents, however many people actually share a library.

Five family members, each a different color, swaying together — not five identical copies, five distinct people.

All three, together

Put the heartbeat, the sound, and the family back in the same frame and it’s the mark you already know — the one in the corner of this page right now.

The full mark — the same SVG that renders live in the nav bar, not a picture of it.

Nothing above is a rendered image. It’s the same markup and the same CSS animation values used sitewide, copied faithfully rather than approximated — if you resize your window and scroll back up to the nav, the pulse, the spin, and the waltz you just watched are running at exactly the same speed up there. One mark, three ideas, taken apart and put back together.

Why the favicon looks a little different

Look closely at the tab this page is open in, and the mark there is simpler: five solid dots and a core, no arcs, nothing moving.

The compact variant — same five people, same center, arcs and motion dropped entirely.

That’s not a simplified afterthought, it’s a deliberate second version. The arcs are the first thing to turn to an illegible smudge once a logo gets small enough — a 16-pixel favicon has about as many pixels across as this sentence has letters — so below a certain size the mark drops them rather than let them blur, and keeps the two ideas that still read clearly at any size: a center, and five people around it.