A recipe in,
a pencil drawing out.

01The recipe

R 4 5.5 16 15;
L 4 10 20 10;
L 8.5 3.5 8.5 7;
L 15.5 3.5 15.5 7

Plotted is the recipe drawn with a ruler: perfectly straight, perfectly closed. Drawn is what Matita gives you.

02The pencil

Lines overshoot

Both ends of a line are pushed out along its direction by 0.2 to 0.5, and each endpoint moves by up to 0.2. The line is drawn as a gentle curve whose middle is pulled sideways by at most 0.7, or 4.5 % of its length, whichever is smaller. A ruled pencil line is never perfectly straight and rarely stops exactly where you aimed.

Boxes cross at the corners

A rectangle is not a closed path. It is four separate lines with a bigger overshoot (0.5 to 1.5), so every corner is a small cross, like a box drawn edge by edge.

Circles overlap where the pen closes

A circle starts at a random angle and sweeps 388° to 418°, so the pen runs 28° to 58° past where it started. Over the sweep the radius drifts outward by 0.55 to 1, so the closing pass sits just outside the opening one. Each point gets ±2.8 % radius noise, and the whole ring is squashed by up to 4.5 %.

Joints stay sharp

Every corner of a polyline moves by up to 0.2 and every segment bows on its own, but the joints stay sharp: a check mark still has a point at the bottom. Closed shapes run past their starting point along the first edge, the way you would close a shape without lifting the pencil.

Arcs and curves overshoot too

Arcs run 4° to 9° past each end, and curves overshoot their ends by 0.15 to 0.45.

Pressure varies per stroke

Every stroke gets its own width, between 0.86 and 1.14 times the base 1.6.

Dots are taps

A dot is a near-zero-length stroke with a round cap, so it reads as a single tap of the pen.

03Repeatable

// the name becomes a number...
const hash = s => { let h = 2166136261; for (const c of s) { h ^= c.charCodeAt(0); h = Math.imul(h, 16777619); } return h >>> 0; };
hash('calendar')   // 2759920927

// ...which starts the generator (add a seed for another take)
const random = prng(hash(name) + seed * 7919);

So calendar is drawn the same way on every machine, in every build, unless its recipe changes. That matters more than it sounds:

• No hydration mismatch. The server-rendered SVG and the client-rendered SVG are byte-identical.
• No flicker. Nothing re-rolls when a component re-renders.
• Snapshot tests stay green. The same input always gives the same output.
• No drawing at runtime. The whole set is drawn once at build time and the package ships the finished path data. The engine only runs if you ask for another seed or draw your own icon.

04Small sizes

05Try it

Shapes: L P Z R C E A Q O. Separate shapes with ;. For example, C 12 12 8; L 12 6 12 12 is a circle with a hand pointing up.

06Your own

npm i @matita/icons

import { drawIcon } from '@matita/icons/engine';
import { createSketchIcon } from '@matita/icons/react';

const Kite = createSketchIcon(drawIcon('kite', {
  defs: { kite: 'Z 12 3 18 10 12 21 6 10; L 6 10 18 10; L 12 3 12 21' },
}));

<Kite size={32} />

07Questions