Draw Tools

Loading…

Twenty-six generators, and none of them makes a pixel

Each of these produces a picture: something to stand in for a photograph nobody has taken yet, something to fill a space behind text, something to lay text into at a size somebody else decided, or something to put on paper. They run as WebAssembly in this browser tab and upload nothing — which matters for a guest list and an attendee list more than it does for a gradient.

What comes out is SVG source, which is text, and that decides the shape of the whole application. Nothing in this workspace ships or produces a binary asset, and this is where that rule stops costing anything and starts paying: an avatar, a placeholder, a label sheet and a barcode are all better as vector source than as pixels. They stay sharp at any size, they can be opened and edited, they are a fraction of the bytes, and a print shop would rather have them. The tools whose obvious form is a PNG say plainly that they produce none, and why.

The six that end up on paper share one problem no other tool in this workspace has: the result is only right if it comes out of a printer at the size it says. Every one of them states its size in millimetres, and the graph paper draws a hundred-millimetre bar to hold a ruler against, because a page silently scaled to fit is the failure that wastes the sheet. The measurements are exact: everything is held in tenths of a millimetre, so US Letter is 215.9 millimetres wide rather than nearly that, and a sheet of twenty-one labels adds up the same every time.

The other rule is about what is *estimated*. Nothing here can measure the typeface a browser or a printer will use, so text fitted into a box is fitted from one stated ratio, deliberately at the generous end. Every tool that lays text out says so on its own result, because a certificate that fits on screen and runs over on paper is a hundred wasted sheets.

Avatars and stand-ins come first, then the fills — a gradient that does not go grey in the middle, a tile with no seam, an organic shape, a section divider, a watermark — then the cards, then the printable sheets, and last five tools that read a picture somebody already has: an SVG made smaller, a path read command by command, a styled code with the point where it stops scanning, a blurred preview and a sprite written as characters.

Avatars and stand-ins

Identicon
A geometric avatar from any string, the same one every time

Monogram
A mark from one to three letters, inside a shape

Fills and backgrounds

Gradient
A gradient as an image and as a rule, mixed so the middle stays saturated

Pattern Tile
A repeating tile of geometric elements, with no seam

Cards and banners

Social Banner
A banner at the size a network asks for, with the safe zone drawn

Quotation Image
A quotation set on a colour, at whatever size the words need

Certificate
A certificate for each name on a list, numbered and coded

Printable sheets

Label Sheet
A sheet of labels, from a partly used sheet onwards

Name Badges
Name badges for an event, from a pasted list

Graph Paper
Printable ruled, squared, dotted, isometric or music paper

Seating Plan
Who sits where, with the two lists that come out of it

Barcode Sheet
A sheet of barcodes, with the narrowest bar measured

Reading and reshaping

Path Reader
A path read command by command, and edited by its numbers

Styled QR Code
A code with chosen colours and shapes, and the point where it stops scanning

Questions

Which tools from the group are missing?
The ones that need a photograph or a mouse. A blurred preview computed *from* an image, a palette lifted out of one, a pixel editor drawn with a cursor, a path edited by dragging its handles: each needs either an upload or a canvas this framework does not have. Three of them are here as the half that is arithmetic — a preview decoded from a string, a path edited by its numbers, a sprite written as characters — and each says on its own result which half it is.
How can an avatar have a colour if I did not choose one?
It is derived from the name, by a small stated hash, so the same name gives the same colour on every device and in every version — which is the whole reason a derived colour is useful at all. The lightness is fixed at the point where the initials clear the contrast standard on every hue, because an avatar whose letters cannot be read is a coloured circle.
Why does the identicon warn that two values can look alike?
Because that is the truth about it, and every other generator of them is quiet about it. A five-by-five grid with mirroring has fifteen cells the hash actually chooses, so a few thousand values will collide. The same value always gives the same picture; different values only *usually* give different ones, and the result says how many cells it had to work with.
Does a barcode here mean the number is registered?
No, and that is the one thing a barcode must never be allowed to imply. It says what number is printed on the label, and the check digit says that number was not mistyped. Whether the number belongs to anything, and whether it is yours to use, are questions a registry answers and this cannot see one.