Free browser tool
Generate a dot grid background online
A dot at every crossing, bigger on every fifth, the way a bullet journal page is set out. Pick the colour, the pitch and the size.
- No sign up
- Nothing uploaded
- PNG or SVG
- Up to 6K
Colour
Size
Every line is a fraction of the short edge, so the pattern looks the same at 1080p and at 6K.
Other patterns
A dot at every crossing
A dot grid is graph paper with the lines taken out, which is why a bullet journal uses one: it gives you something to align to and then gets out of the way. This page draws one at the size you ask for, with a bigger dot on every fifth crossing both ways so you can still count a distance off it.
The Grid slider sets how many dots fit across the short edge, from 14 to 72. The dots are sized against that edge too, so a dense grid has small dots and a loose one has large ones, which is the proportion that keeps it readable.
Light enough to put something on
Pick Carbon or Slate and the field reads as texture under a screenshot. Pick Paper and it is a notebook page. Olive, Rose, Sand and Mint are the louder ones, and the heavy dots in those are the colour the rulers are drawn in elsewhere in this set.
PNG or SVG
The PNG is painted in this tab at the size in the dock. The SVG is two paths of zero-length strokes with round caps, which is one of the reasons a 6K field draws quickly: a few thousand circle elements is a document a rasteriser spends real time on, and this is not that.
Behind a recording
Prequel ships this grid as one of seven drawn backgrounds in its editor, redrawn at the export's own resolution. Record your Mac's screen, and the editor opens with the zooms already placed, your camera framed and a background behind it.
How it works
Drawing in 3 steps
- Pick the paletteEight of them, drawn as the field itself. Carbon and Slate read as texture; Paper reads as a notebook page.
- Set the pitchThe slider sets how many dots fit across the short edge. The dots are sized against that edge too, so a dense grid has small dots.
- Download itPNG at the size in the dock, or SVG for anything that gets scaled or recoloured later.
What it does
Free, and still worth using
Keep something on top readable
The dots give an alignment to work to and nothing else. Every fifth crossing is heavier in both directions, which is enough to count a distance off.
Fill a 6K display quickly
The whole field is two paths of round-capped strokes. A few thousand circle elements is a document a rasteriser spends real time on, and this is not that.
Match any frame
Phone, square, 4:5, 1080p or a 6K display. The pitch is a fraction of the short edge, so the field reads the same in all of them.
Keep the file off a server
Drawn in this tab, saved from this tab. Nothing is uploaded, nothing is queued and there is no watermark.
On a Mac, the editing is already done
Prequel records your screen at its full resolution, then opens an editor with the zooms already placed, your camera framed and a background applied. Export one MP4 at up to 4K.
No credit card required
- Zooms placed on every click
- Camera shaped, sized and framed
- Background, padding and shadow
- Microphone and system on separate gains
- Cursor smoothed and resized
More tools
The rest of them
Free browser tool
Free cutting mat background generator
A self-healing mat with numbered rulers and an angle fan, at any size.
Free browser tool
Free online graph paper generator
A squared grid in eight colours, at any size, as a PNG or an SVG.
Free browser tool
Free blueprint background generator
Drafting paper with registration crosses and a border, at any size.
Free browser tool
Free isometric grid generator
A thirty degree triangular grid in eight colours, at any size.
FAQ
Dots, spacing and the files
Is it free?
Yes. No account, no card, no watermark. The drawing runs in your browser, so there is nothing to charge for.
Can I use it as a bullet journal page?
Yes. Pick a square or portrait size, choose Paper, download the SVG and print that. The SVG has no pixels of its own, so your printer sets the resolution.
How far apart are the dots?
As far as the slider says, measured across the frame's short edge. The spacing is a proportion rather than a millimetre count, so the field survives being drawn at a different size.
Can I change the dot size on its own?
The dot size follows the spacing, because that proportion is what keeps a loose grid and a dense one both readable. Open the SVG and change the two stroke widths if you want something else.
Can I use it commercially?
Yes. It is your file, with no watermark and no attribution asked for.
Why does Prequel have a dot grid page?
Because this field is one of seven backgrounds in Prequel's editor, redrawn at the export's own resolution. This page is the same drawing with a download button attached.