How every cat in Catchmemeow is drawn by code
Every so often a kid asks us where the cats in Catchmemeow come from, and the honest answer sounds like a riddle: there are no cat pictures in the game. Not one. If you cracked open the game's files hoping to find a folder full of drawings, you'd find no image files at all. Just instructions. Every cat, every dog, every hat, every one of the 25 worlds and all 121 hidden treasures gets drawn — fresh, right in front of you — by code, at the moment you see it.
This kind of art has a fancy name (procedural SVG) but the idea is old and cozy: instead of keeping a painting, you keep the recipe. We thought curious kids might like a peek inside the workshop, so here's how a cat gets made.
Shapes are the ingredients
The whole game is drawn from three ingredients: circles, rectangles, and paths. A path is just a wiggly line the computer follows — connect-the-dots, but the dots are invisible. Add a bold ink outline and a flat, cheerful fill color, and you've got the look of the picture books we grew up on. P. D. Eastman and Sandra Boynton drew with confident lines and happy shapes, and that spirit is baked into every critter here on purpose.
A cat, it turns out, is mostly circles anyway. The head is a circle. The eyes are two smaller circles with even smaller circles inside them. The body leans rectangle. The tail is one curvy path, and honestly the tail is where a cat's whole personality lives. So instead of drawing a cat, we wrote down how to draw a cat: put a circle here, this big, this color; put two eye-circles there; swoop a tail-path out the back. The code reads the recipe out loud, and a cat appears.
Do this once and you have one cat. Do it with the sizes and colors left blank — fill in the blanks differently each time — and you have every cat.
The 200-by-200 recipe box
Every critter is drawn inside a small imaginary square, 200 units wide and 200 units tall. Think of it as a recipe box, and the box has house rules: the head goes at this spot, the eyes at that spot, the feet land down here. Always. Every cat, every dog, no exceptions.
That sounds bossy for art, but it's secretly the kindest rule in the whole game, because it's how a hat knows where to sit. A hat doesn't have eyes. It can't look down and find a head. But it doesn't need to — since every head in Catchmemeow sits at the same spot in the box, the hat just parks itself at the head spot and trusts the rule. Round cat, skinny cat, dog with enormous ears: the hat fits. We never have to check. One rule, followed everywhere, and suddenly every hat fits every critter that will ever exist.
Kids figure this out fast when you say it plainly: the cat and the hat never actually meet. They just both agreed, ahead of time, where the top of the head would be.
The lucky number that draws the same cat twice
Here's our favorite part. When the game needs a new critter, it doesn't flip a coin over and over. It picks one number — call it the critter's lucky number — and feeds it to something called a seeded random-number generator. That's a machine that spits out a long string of choices (how round the head is, what color the fur is, how the tail curls), and the trick is this: the same lucky number always produces the same string of choices. Same seed, same cat. Every single time.
So the game never stores a cat. It stores the lucky number, and redraws the cat from scratch whenever it's needed. That's why every round feels fresh — the worlds are genuinely built anew each time you play — and yet nothing is ever lost, because any critter can be summoned back exactly as it was. The cat you caught isn't saved as a picture. It's saved as a number that remembers how to become that cat.
We find that a little magical, even now. A whole cat, folded up inside a number.
Try it yourself, no computer required
You can play procedural artist at the kitchen table.
- The circle cat. Draw one big circle for a head and a rectangle-ish body under it. Two small circles for eyes, one curvy line for a tail. Now draw it again, but change only one thing — a fatter body, a curlier tail. Congratulations: you just ran the recipe twice with different fill-in-the-blanks. That's exactly what our code does.
- The dice cat. Roll a die three times. First roll picks the fur color (1 is orange, 2 is gray, you decide the rest). Second roll picks the tail: odd curls up, even curls down. Third roll picks the eyes: big if it's 4 or more, sleepy otherwise. Write your three rolls down — say, 3-5-2. That's your seed. Hand the same numbers to a friend with the same rules, and they'll draw your cat, without ever seeing yours. Same lucky numbers, same cat. Now you know how the game remembers.
Why we keep it this way
Skipping image files isn't just a party trick. Because everything is a recipe, one engine can do many jobs. Each of the 25 worlds gets its own palette, landmarks, music, and hidden treasures from the same small kit of shapes. When we recently rebuilt the game on React and TypeScript, the hand-drawn engine came along unchanged — new kitchen, same recipes. And the free coloring pages on this site aren't traced from the game; they're generated by the same engine, which simply draws its art in black and white and leaves the coloring to you. The art literally draws its own coloring book.
It also fits how this project started: a dad building a homemade gift for his wife and little ones, with the family's real pets — Max, Yogi, Penny, and Mika — hiding in the game. Homemade is the point. The game is free, there are no accounts, no timers, and no way to lose; your progress lives on your own device, and the game screen never shows ads, by design. And if all these code-drawn cats leave your family wanting a warm, un-procedural one, that's our quiet hope — real shelters like Austin Pets Alive are full of critters no recipe could improve on.
Next time a cat pops up in the game, look close. Somewhere under the fur is a circle, a rectangle, a wiggly path — and one lucky number, holding the whole cat together.