Twenty animals with the letters cut out of them.
The farm shop's wheat-paste posters put D, S and F inside the animal rather than beside it. This is that idea turned into a system: twenty marks, six rules, and a reveal that runs D to S to F in eighty-millisecond steps.
The six rules that make it a system.
-
The silhouette is one closed path, in one colour.
Not an outline, not a fill with a stroke, and never two colours. One shape, printed once. The moment a mark needs a second plate it stops being a wheat-paste poster and starts being a logo.
Two colours per poster, and the animal is the second one.
-
D, S and F are cut as negative space inside it.
The letters are holes, not overlays. What shows through them is whatever the poster is pasted on — the ground colour, the wall, the page.
-
The letters follow the anatomy, never a baseline.
Shoulder, flank, haunch. On the cockerel they run around the curve of the egg; on the barley they climb the stem. A horizontal baseline through an animal reads as a caption, and a caption is not a mark.
This is the rule that takes the longest and the one that makes it look drawn rather than set.
-
Minimum counter width is four per cent of body width.
Below that the letters close up at small sizes and the animal turns into a blob. Four per cent is what survives at forty-eight pixels, which is a favicon.
-
One beast per viewport.
Two on a screen reads as clip-art. If a page wants a second animal, one of them is not doing any work.
-
They always read D, then S, then F.
Along the animal's natural reading direction — nose to tail, root to ear. Never right to left, whatever the composition would prefer.
What the reveal actually does.
The idle state is the animal, solid, with the letters closed. On reveal they open in sequence: D at zero, S at eighty milliseconds, F at a hundred and sixty. Four hundred and twenty milliseconds each, on the paper easing.
That eighty-millisecond stagger is the whole trick. Simultaneous reads as a fade; a longer gap reads as three separate animations. Eighty is fast enough to be one gesture and slow enough to be legible.
Under reduced motion the letters are simply open. The identity survives; the motion does not.
The roster, and what each one is for.
| Beast | Belongs to | Why it is drawn that way |
|---|---|---|
| Cow | The boxes | Meat and dairy. The widest body in the set and the easiest to cut letters into. |
| Pig | Fostering | A shorter, deeper body. The D sits in the shoulder and the F in the haunch. |
| Sheep | Wool and fostering | The fleece gives a bumpy top edge, so the letters sit lower than anywhere else. |
| Cockerel | Shopping | An egg with a fowl's head. The best mark in the set and the one from the posters. |
| Chicken | Shopping | The cockerel without the tail, for when the mark has to sit in a smaller box. |
| Barley sheaf | Brewing | Vertical rather than horizontal, so the letters stack instead of running. |
| Tractor | Trundling | The only machine in the set. The wheels are counters in their own right. |
| Dry-stone wall | Belonging | Three courses, three letters. The most literal mark we have. |
| Hedgerow | Wilding | A silhouette with no straight edges at all, which makes the counters hard. |
| Badger | Cocking Up | Canon chapter twelve, and the correct animal for an error page. |
The technical specification.
Geometry
- Field
- 200 × 150Every beast is drawn on the same grid.
- Minimum counter
- 4% of body widthSo the mark survives at 48px.
- Paths per mark
- One closed silhouettePlus three letter paths, cut as holes.
- Letter order
- D → S → FAlong the animal's natural reading direction.
Motion
- States
- idle → reveal → hover → exitNamed to match a Rive state machine.
- Stagger
- 80msD at 0, S at 80, F at 160.
- Duration
- 420ms eachOn --ease-paper.
- Reduced motion
- Letters open, no animationThe mark still appears.
The CSS state machine here is a stand-in for a Rive runtime. The state names and the data-letter attributes already match, so swapping the runtime in is a substitution rather than a rewrite.
This is inspired by the posters, not copied from them.
The wheat-paste set is Diddly Squat's own and the letterform-animal idea is theirs. What is here is an independent system built to the same principle — twenty marks drawn from scratch, with a rule set that lets a twenty-first be drawn consistently. Nothing on this site is licensed, authorised or endorsed.
What people ask.
Because the posters use animals, and because a farm shop that marks itself with an abstract shape is a farm shop that has been to too many meetings.
Chapter twelve is Badgering, the badgers cost this farm a great deal of money and time, and no other animal on the list has earned the error page more.
Yes — that is what the rules are for. A twenty-first beast takes about an afternoon and comes out consistent with the other twenty.
Poster panels, the menu, the error states, the achievement grid and the share cards. One per viewport, everywhere.
Elsewhere on the estate.
/estate/the-print/
/chapters/the-grammar/
/lawyering/states/
