The Tenfold Playground
Tenfold: Celebrating 10 Years of Ink & Switch
April 2026
Ivy Reese
Tenfold is a quirky little stew of a project, touched by many hands. We put all ten kinds of design in it: visual design, user interface design, API design, and then the half-dozen known forms of “social” design — the design of creative constraints, personality, self-revealing functionality, false walls, sticky friction, and spite, seeping into every facet from DX to docs. Todd outlined the visual design, I’ll shade in the rest.
Background: Todd tapped me for Tenfold in mid-November '25, shortly after we’d wrapped the new Automerge website. I saw his sketches and an interactive catenoid he’d been tinkering on. Together we hashed out how the letters should be manipulated, spitballed some ideas for cool letters (like a cute little wormie one for a “W”), thought about how to design this so that it’d also work on a shirt. I set about prototyping a little playground where people could see and play with all the letters and then build new letters of their own. After some iteration, we invited everyone in the lab to spend a week crafting letters in the playground — some of the most fun we all had in Fiscal Year 25/26.
Would love to link to this playground so others could try it out. Gee, that’d be nice. How many Patchworks could the Switch lab ship if the Switch lab flipped the bit? Sea — por favor — paciente.<br>Example Design Decisions for Exemplary Clarity
Our APIs only let you draw white lines and arcs of a preordained thickness.
You can draw outside the area apportioned to your letter, but the coordinates will subconsciously hint you away from this (see discussion of “clip space” below).
It would be nice for non-programmers to be able to make letters too. But hand-drawn letters might be aesthetically at odds with the code-generated ones, and might be hard to animate or print. But if you can get your paws on an SVG-to-canvas renderer and you possess judicious taste, then I’m not going to stop you (Todd).
There’s a balance between free expression and legibility. For now, you can experiment freely and we will only delicately hint that your letter best look like a letter. Later, we may legislate it — stay on our good side, mm?
An excerpt from the docs, showing how we define space for each letter. The coordinates hint you toward drawing something centered and symmetrical (because 0,0 is in the middle) that comfortably fills the space (because coords extend to a nice round 1 at each edge).
API Design
Tenfold uses my beloved 2d for rendering, encapsulated behind our own lil drawing API. This API is written firstly for ergonomics, with sane defaults and helpful helpers, but also firstly to creative constrain you. Why? Several of the people participating in this project have never before created this kind of procedural art; an environment that feels shallow (even if only superficially) is less intimidating than one that feels unknowable in its vastness. That’s the most important part of a creative constraint — the way it frees you from the many hesitations of the blank page.
Oh, how makes me mourn Flash. If only the browser were truly a user agent and gave you a way to author web pages. If only all such user agents had unified tools for programming and drawing. Maybe in another lifetime.<br>The drawing API offers these parameters so that letters can be wiggly and ticklish:
time — slowly climbs from 0 and 1 like a sawtooth, snapping back to 0 every ~8 seconds
x and y — the last known position where someone tapped/dragged on your letter
some other stuff (shh not important — giant winking asterisk)
The Tenfold playground. Docs on the right, replaced with an editor when you select a letter. Note that the controls in the second row are quite different from the final version. There was a little draggable area full of “waffles” which were a second set of x/y params available to each letter. Letters rarely used both sets of x/y params, so we removed the waffles.
So you’re gonna make a letter. You have a little preview of the entirety of Tenfold on the left, and a little docs viewer / JS editor on the right. You select which letter variant you want to edit, and then write some JS. You do a bit of math, some loops, eventually issue drawing commands. All the code for your letter is re-evaluated every time the browser renders a frame of animation, and it draws whatever stuff you tell it to draw. Here’s an example:
// Draw a circle at 0,0 (centered within the space for your letter),<br>// with a radius of 1 (so it just touches the edges of the space)<br>circle(0, 0, 1)
// Say hi to several friends in different corners<br>text("hi elliot", -1, -1) // top left<br>text("hi beano", +1, -1) // top right<br>text("hi chee", -1, +1) // bottom left<br>text("hi ivy", +1, +1) // bottom right
// Draw a circle, complicated version<br>let radius = 1<br>let p = {x:0, y:0}<br>for (let angle = 0; angle
If you’ve ever drawn graphics with code, that complicated circle...