Why hand-drawn annotations feel more human than perfect shapes

Put a perfect red rectangle around a number on a slide and it looks like part of the slide. Draw a slightly lopsided box around the same number, live, and it looks like someone is pointing at it. The two marks carry the same information. They don’t say the same thing.

That difference is why PenLayer draws shapes in a hand-drawn style by default. This post explains the thinking, how it’s done without the shapes looking jittery, and when you should turn it off.

Marks that look drawn read as a person

A clean geometric shape is the language of prepared material. Slides, diagrams and interface design are full of crisp rectangles and exact circles. When you add one more on top, it blends in. The audience’s eye has no reason to treat it as new.

A hand-drawn mark is different in kind. The wobble in the line, the circle that doesn’t quite close, the arrow that curves a little: all of it says that a person made this just now, for this conversation. That’s exactly what an annotation is for. You’re not adding to the slide. You’re pointing at it.

There’s a social side too. A rough circle feels provisional in a good way, like a sketch on a whiteboard or a note in the margin. It invites a reply. A perfect box feels finished, closer to a statement than a question. In a meeting or a lesson, where the point is usually to talk about the thing you’ve circled, provisional is often what you want.

And it’s forgiving. When shapes are expected to be rough, nobody notices that yours is rough. When they’re expected to be perfect, a slightly off-centre box looks like a mistake.

What “hand-drawn” means in PenLayer

PenLayer draws its geometric marks with rough.js, a library that renders shapes as if sketched: lines that overshoot slightly, edges that aren’t quite straight, the odd double stroke. It applies to:

• Lines, rectangles and ellipses.
• Every arrowhead, straight or freehand, in all five head styles.
• Numbered step badges and stamped icons, which go through the same brush.

It doesn’t apply to the pen or the highlighter. Those are already freehand ink, drawn with a variable-width stroke that follows your hand. Roughening ink that you drew yourself would only make it look less like what you drew. The freehand arrow is a mix: its shaft is your ink, and its head is geometry, so the head gets the sketched treatment.

The problem with random wobble

The obvious way to make shapes look hand-drawn is to add a bit of randomness every time you draw them. That goes wrong quickly.

A drawing on screen is redrawn more often than you’d think. When you undo a stroke, erase one, or the screen changes size, PenLayer rebuilds the whole picture from its list of marks. If each shape picked new random wobble every time, every rectangle on screen would twitch into a slightly different shape on every undo. Your careful circle around the total would shimmer. That reads as a glitch, not as handwriting.

So each shape gets a random seed at the moment you draw it, and keeps that seed. rough.js generates the wobble from the seed, and the same seed always produces the same wobble. The result is that every shape is different from every other, like real drawing, but each one stays exactly the same shape for as long as it’s on screen.

The same idea applies to arrowheads. You can choose a head style, or pick Random. With Random, the style is decided once, from the arrow’s own seed, when you draw it. The arrow keeps that head, instead of turning into a different one on the next redraw. Angles and lengths are varied slightly from the seed too, so two barbed arrows are never quite identical.

Rough, but readable

Hand-drawn shouldn’t mean messy. A few principles keep the sketched style legible:

• The wobble is small. A shape should still read instantly as a rectangle or an ellipse. The roughness is texture, not distortion.
• Arrowheads stay distinct. The five head styles are deliberately spread between open and filled shapes, because two similar open barbs drawn thickly merge into what looks like a filled triangle.
• Badges stay whole. A numbered step is a filled disc with a number on it, and it’s never dashed, because a broken badge looks like a rendering fault rather than a choice.
• The text colour follows the badge. A step badge’s number is black or white depending on which can be read against the colour you picked.

When to switch to Smooth

The hand-drawn style is a default, not a rule. Preferences → Shape style switches between Hand drawn and Smooth, and there are good reasons to use Smooth:

• Formal decks. A board presentation or a polished product launch may call for marks that match the precision of the slides.
• Diagrams and technical drawing. When the geometry itself means something, like boxes that should line up or lines that should meet, clean shapes communicate it better.
• Small, dense screens. On a busy interface with tight spacing, a crisp rectangle can frame one control more precisely than a sketched one.
• Personal taste. Some people just prefer clean lines, and that’s a fine reason.

Changing the setting redraws everything already on screen in the new style, so you can switch mid-session and see the difference immediately. The pen and highlighter look the same either way.

The idea underneath

Tools for drawing on screen usually aim to look professional, which tends to mean precise. But an annotation isn’t a finished graphic. It’s a gesture: the on-screen version of leaning over and tapping a finger on the page. The more it looks like a gesture, the better it does its job.

That’s the whole argument for rough shapes. They’re not a style choice for its own sake. They make the mark look like what it is, a person pointing at something, right now.

Trying it

You can see both styles in PenLayer’s 14-day free trial, with no account or card. The presentations page shows the hand-drawn shapes over real slides, and the docs cover the style settings.