Dev Tartan

About Dev Tartan

Dev Tartan generates a unique, deterministic tartan pattern from any GitHub username. Same username, same tartan, every time. It is a single HTML file with zero dependencies: no npm, no build step, no framework, no existential dread. Your build pipeline is your browser.

It was built entirely using GitHub Copilot CLI for the GitHub Copilot CLI Coding Challenge.

What Are Tartans and Kilts?

A tartan is a pattern of crisscrossed horizontal and vertical stripes in multiple colors, originating in woven cloth. Each tartan's unique arrangement of colors and stripe widths is called a sett, and specific tartans have historically been associated with Scottish clans, families, and regions. A kilt is the traditional Scottish garment made from tartan cloth — a knee-length, pleated wrap worn around the waist. Once everyday Highland dress, kilts are now most often seen at weddings, ceilidhs, and other formal occasions.

How It Works: The Pipeline

Every tartan flows through a five-stage pipeline: hash → derive → mirror → render → ambiance. Here is what happens at each stage.

1. Hashing: Username to Entropy

Your username is lowercased and passed into the SHA-256 cryptographic hash function via the SubtleCrypto.digest() method from the Web Crypto API. This produces 32 bytes (256 bits) of deterministic, uniformly distributed output. The critical property here is the avalanche effect: changing a single character in the input flips, on average, half the bits in the output. octocat and octocot produce entirely different tartans.

"octocat" → toLowerCase() → TextEncoder.encode() → crypto.subtle.digest("SHA-256", ...) → Uint8Array(32)

Since usernames are lowercased before hashing, octocat and Octocat map to the same tartan. This matches GitHub's own case-insensitive username behavior.

2. Sett Derivation: From Bytes to Stripes

A tartan's repeating unit is called a sett. Dev Tartan carves one out of the SHA-256 hash bytes using modular arithmetic:

Duplicate colors are avoided by bumping the palette index by 7 (a coprime offset relative to the palette size of 20). This ensures even colliding byte values resolve to distinct colors.

Three palettes are available: Traditional (20 colors inspired by historical Scottish dye sources, from woad-adjacent navies to lichen-derived golds), GitHub (contribution graph greens), and Microsoft (the four Windows logo colors and their variants).

3. Symmetry: The Mirror Trick

Real tartans use reflective symmetry: the sett plays forward and then reverses, creating a palindromic stripe sequence. Given stripes [A, B, C, D], the rendered sequence becomes:

A  B  C  D  C  B  A  B  C  D  C  B  A  ...
└──forward──┘  └─reverse─┘  └──forward──┘

The reversal omits the first and last elements to avoid doubled stripes at the pivot points. This is the same technique used in traditional tartan weaving. If you have ever reversed a linked list in a coding interview, congratulations: you were unknowingly training to weave tartan.

4. Rendering: Warp, Weft, and SVG Rectangles

Real tartan is a 2/2 twill weave: warp threads (vertical) and weft threads (horizontal) interlace at right angles. Dev Tartan simulates this using layered SVG <rect> elements:

1. Background fill: the first color of the sett floods the 500x500 SVG canvas
2. Warp stripes: vertical rectangles at 90% opacity
3. Weft stripes: horizontal rectangles at 55% opacity with mix-blend-mode: multiply, simulating thread crossings where colors optically blend
4. Twill texture overlay: a tiny 4x4px repeating SVG <pattern> of alternating semi-transparent light/dark squares, mimicking the diagonal twill ridges visible in real woven cloth

The sett is scaled so that roughly three full repeats tile across the canvas. Each stripe's pixel width is computed from its thread count, multiplied by a scale factor derived from the total sett width.

5. Ambiance: Background Tartanification

After rendering, a miniature version of your tartan is serialized as a data: URI SVG tile (160x160px) with very low opacity (6-8%) and set as the page's repeating background-image. The entire viewport becomes subtly tartanified.

Clan Tartans

If your GitHub username matches one of 106 real Scottish clan names, Dev Tartan renders the authentic clan tartan instead of generating one from the hash. Sett definitions were sourced from public-domain tartan registries, principally the Scottish Register of Tartans and cross-referenced with the Scottish Tartans Authority.

Each sett is encoded as a compact string of standard tartan weaving abbreviations and thread counts (e.g., R 72 B 8 BK 12 Y 2). The lookup is case-insensitive and supports common alternate spellings: Mc prefixes resolve to Mac, Stuart resolves to Stewart Royal, Ogilvie to Ogilvy, and so on.

The Bagpipe Synthesizer

Every username also gets a unique, deterministic bagpipe tune synthesized entirely in the browser via the Web Audio API. The audio graph looks like this:

• Three drone pipes (bass, tenor, alto) built from pairs of detuned OscillatorNodes with sawtooth and triangle waveforms, producing the sustained harmonic drone characteristic of Highland bagpipes
• A chanter melody derived from your username hash, using a pentatonic scale. Hash bytes select note indices, durations, and ornament patterns (grace notes, doublings, throws) from the Piobaireachd tradition
• Breath noise modeled with a white noise buffer filtered through a BiquadFilterNode (bandpass, 800 Hz center) and amplitude-modulated at 0.3 Hz to simulate the cyclic pressure of a bag under the piper's arm
• Convolution reverb synthesized from a procedurally generated impulse response, adding a sense of acoustic space

The tune can be downloaded as a 16-bit PCM WAV file, rendered offline via OfflineAudioContext.

The Invertocat

The GitHub Invertocat logo in the header is not a static image. It is an SVG <clipPath> filled with a dynamically generated tartan <pattern>. When you generate a tartan, the Invertocat updates to wear your tartan as its fill. The clip path uses the official Invertocat SVG path data from GitHub's logo page.

The Character

After generating a tartan, a small procedurally generated SVG character appears wearing your tartan as a kilt. The character's features (skin tone, hair color, hair style, eye color, and expression) are derived from later bytes in the SHA-256 hash, making each character as deterministic and unique as the tartan itself.

Technical Constraints

• Zero dependencies. The entire application is a single HTML file. No npm packages, no bundler, no transpiler, no framework. Every line of CSS and JavaScript lives inline.
• No server. All computation runs client-side. The only network request is an optional call to the GitHub Events API to populate the gallery of recently active developers.
• Deterministic output. Given the same username and palette, the tartan, character, and bagpipe tune are identical on every run, on every browser, on every device. This is a pure function of SHA-256.
• ~2,700 lines. That is the entire codebase. HTML structure, CSS styling, SVG rendering, audio synthesis, 106 clan tartan definitions, and a procedural character generator, all in one file.

The Numbers

• SHA-256 produces 2²⁵⁶ possible hashes, which is roughly 1.16 x 10⁷⁷. That is more possible tartans than there are atoms in the observable universe.
• The traditional palette has 20 colors. With 4-6 colors per sett and 3 width buckets per stripe, the combinatorial space is enormous even before the hash enters the picture.
• The 4x4 twill overlay pattern contains 16 sub-cells, alternating between rgba(255,255,255,0.03) and rgba(0,0,0,0.04), faithfully approximating the diagonal ridge pattern of a 2/2 twill weave at pixel scale.

Colophon

Dev Tartan was built entirely with GitHub Copilot CLI. The typeface is Mona Sans, GitHub's variable font (weights 200–900), loaded via Fontsource CDN with font-display: swap to avoid layout shift. The color scheme is inspired by aged parchment and Scottish earth tones.

Source code is on GitHub. Licensed under MIT.