Exploration · Marks

Constructed, not depicted

August 2026Killed

Can a project mark be generated from a rule instead of drawn as a picture, so it has something to animate?

Paste it into Claude or any AI tool to build your own version.

Read the prompt

Build a set of small animated marks for a design portfolio, one per project, as React components that draw inline SVG.

Rest state: each mark is a single glyph that names the project's sector, drawn with one hairline stroke and readable at 32px.

Motion: on hover or keyboard focus, the glyph moves using only its own parts. Do not redraw it or add new shapes. The motion should act out what the project did. For example, a cross of nine dots can close in by absorbing its inner four dots while the outer four stay as a faint field, and three unequal bars can level onto the middle bar so that bar becomes the one that stays.

Rules:
- One stroke weight, one box size and one easing curve across every mark, so any difference between marks comes from the figure itself.
- The same mark must work from 32px to 240px. Check the 32px size first, because that is where a motion idea most often fails.
- On touch, tap holds the motion open and a second tap releases it.
- With prefers-reduced-motion, show the end state with no movement.
- Test each pair of marks by swapping them: if a reader could not tell which mark belongs to which project, the marks are not doing their job.

What I started with

Four hairline glyphs close the project cards on the home page, one per sector: ascending bars for financial services, a dot matrix cross for healthcare, two interlocking rings for payments, a rhombus board for higher education. They are drawn at 32px, they read cleanly, and they have been on the site for a while.

My objection was that they depict. A drawn mortarboard is a picture of a subject, and a picture has nothing to animate. I wanted marks that were built from a rule instead, so that they would have count, spacing and bearing to move through, and so they would look like this site had drawn them rather than like something chosen from a set.

What I built

Three construction families, each applied to two projects. Every figure is generated parametrically, so the element count is derived from the render size and a mark at 32px and the same mark at 240px are one drawing at two rulings rather than two drawings. One hairline, one box, one ramp, one reduced motion rule across all six, so any difference between two marks is a difference of construction.

At rest each is an even field. On hover it resolves: the elements converge, one holds at full strength while the rest fall back, and a filled point appears where the figure landed. Funding Finder resolves by alignment, the symptom checker by narrowing.

Hover or focus a plate to run both projects at once. On a touch screen, tap to hold it open and tap again to release.

Why I killed it

Read the pairs above again. The construction is doing what I asked, the figures are legible at every size I tested, and the two projects in each row are telling you nothing about each other. Swap them and no reader could tell which mark belonged to which project.

The mistake was thinking construction could replace subject. It cannot. Construction is a grammar, and all three families were speaking the same sentence: an even field resolves to one answer. That is true of any design project ever undertaken, which is why the marks were handsome and interchangeable at the same time. I had solved the animation problem and lost the identification problem, and the identification problem was the one the glyphs were there for.

The second attempt

So I went back to the four glyphs already shipping and asked a narrower question: can the original figure stay exactly as it is at rest, and move using only its own parts? The cross is nine discrete dots. The finance mark is three unequal quantities. The payments mark is two bodies with an overlap. Those are parts with somewhere to go.

The rule became: rest is the sector glyph, unchanged, and motion is the project’s own argument performed on that glyph’s parts. Nothing gets redrawn. That also meant the rest states were already approved and already proven at 32px, which the invented families had to earn from nothing.

What I learned from the failures

Two of these were rebuilt because the first version failed at the only size that decides anything. The narrowing cross originally retracted all eight dots into the centre, which at 32px resolved to a single four pixel dot in an empty box. It now keeps the outer four as a ghosted field and absorbs only the inner four, so the figure still reads as a cross closing rather than as a mark disappearing.

The finance bars first levelled onto the tallest, which raises two bars off the baseline and reads as a chart entrance. That says growth, and growth is not what the project did. Levelling onto the middle makes the movement reciprocal, and the bar that never had to move becomes the survivor, which is the truer claim anyway: the match was always among the options, and what changed is that the options became comparable.

This direction did not ship either. It is better than the first and it is still not good enough to put on the home page, mostly because the payments mark resolves to a ring with a centred dot, which is a record button. But the rule it produced is the part worth keeping, and it is the thing I would start from next time: a mark earns its motion from what it already is, not from a system layered over it.