Free browser tool
Generate a hatch pattern online
Hairlines at forty-five degrees, with every fifth one picked out. Set the spacing, pick a colour and download it.
- 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
Hairlines at forty-five degrees
Hatching is the oldest way to shade a drawing: parallel lines, close together, at an angle. This page draws them across the whole frame at 45 degrees, with every fifth line picked out in the heavier colour so the field has a rhythm rather than a single flat texture.
The spacing is measured perpendicular to the lines, which is the gap your eye reads. The Grid slider sets it against the short edge of the frame, so a hatch drawn for a phone and one drawn for a 6K display have lines the same distance apart relative to the picture.
Tight or open
At 72 the field is nearly solid and reads as a tone. At 14 it is a loose set of rules you can put text over. The heavy line every fifth one keeps both ends of that range from reading as noise.
PNG or SVG
The PNG is painted in this tab at the size in the dock. The SVG is two paths, which is the file to take into Figma or Illustrator: scale it to anything, recolour it in two clicks, and the hairlines stay hairlines.
Behind a recording
Prequel ships this hatch 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 colourEight palettes drawn as the hatch itself, so you can see the heavy line against the fine ones before you commit.
- Set the spacingTight at 72 and nearly solid, open at 14 and loose enough to put text over. The preview redraws as you move the slider.
- Download itPNG at the size in the dock, or SVG for anything that gets scaled or recoloured afterwards.
What it does
Free, and still worth using
Shade an area without a gradient
Hatching is tone made of lines, and lines survive a video encoder. A smooth ramp through H.264 comes out with visible steps in it.
Get a field with no seam
Every line crosses the whole frame corner to corner. A tiled hatch shows a join wherever the tile and the frame disagree.
Keep a rhythm at both ends
Every fifth line is heavier. That is what stops a tight hatch reading as a flat grey and an open one reading as noise.
Keep the file off a server
Drawn in this tab, saved from this tab. Nothing is uploaded and there is no watermark on it.
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 dot grid pattern generator
Dots on a 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.
FAQ
Spacing, angles and the files
Is it free?
Yes. No account, no card, no watermark, and no limit on how many you draw.
Can I change the angle?
Not on this page. The SVG is two paths, so rotating the whole thing in a vector editor is one transform on one object.
Can I use it as a CSS background?
The SVG is small enough to inline as a data URL, and it has no resolution of its own. It is drawn for the frame you asked for, so it is a background image rather than a repeating tile.
Why is the spacing a count instead of pixels?
Because it is measured across the frame's short edge. That is what makes the same setting look the same on a phone wallpaper and on a 6K one.
Can I use it commercially?
Yes. It is your file, with no watermark and no attribution asked for.
Why does Prequel have a hatch page?
Because this hatch 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.