Quatrefoil Pattern

Make a quatrefoil pattern from the true construction: the outline of four equal, overlapping circles. Choose the motif size, the lobe ratio (how round the lobes are), solid, outline or line style, and a grid, half-drop or brick repeat, then download a seamless SVG tile, a 300 DPI PNG or a PDF at full size. Tick the stencil option for a cut-out page: an outline ring held to the centre by four bridges, so nothing falls out when you cut it. Every lobe is an arc of its circle, the lobes meet exactly where the circles cross, and the tile repeats edge to edge (all tested). Nothing is uploaded.

100% private — everything runs in your browser. Everything runs in your browser; nothing is uploaded.

How to make a quatrefoil pattern

1. Choose a preset or set the motif size and lobe ratio.
2. Pick a style (solid, outline band or line) and a repeat layout.
3. Set the gap between lobe tips and the two colours.
4. Download the SVG tile for fabric, wallpaper or the web, or the PDF at full size.
5. For a stencil, tick Add a stencil page, print at 100% and cut out the four grey shapes.

What you can use it for

• Wall stencils and painted furniture
• Fabric, cushion and wallpaper designs
• Wedding stationery and invitations
• Laser and vinyl cutting (SVG)
• Tile and floor layouts
• Website and slide backgrounds

The 13 presets

#	Preset	Lobe ratio	Layout	Style	Turn	Repeat (3 in motif)
1	Classic tile	1	Grid (lobes tip to tip)	solid	0°	3.15 × 3.15 in
2	Garden half-drop	1	Half-drop (every other column moved half a step)	solid	0°	6.2 × 3.1 in
3	Brick repeat	1.2	Brick (every other row moved half a step)	solid	0°	3.05 × 6.1 in
4	Touching lobes	1	Grid (lobes tip to tip)	solid	0°	3 × 3 in
5	Turned 45°	1	Grid (lobes tip to tip)	solid	45°	2.71 × 2.71 in
6	Slim lobes (tangent circles)	0.71	Grid (lobes tip to tip)	solid	0°	3.1 × 3.1 in
7	Round lobes	1.6	Grid (lobes tip to tip)	solid	0°	3.1 × 3.1 in
8	Outline tile	1	Grid (lobes tip to tip)	outline	0°	3.1 × 3.1 in
9	Gold line repeat	1.1	Half-drop (every other column moved half a step)	line	0°	6.1 × 3.05 in
10	Navy and white	0.9	Brick (every other row moved half a step)	solid	0°	3.08 × 6.16 in
11	Blush outline	1.3	Half-drop (every other column moved half a step)	outline	45°	5.48 × 2.74 in
12	Single motif	1	One motif	solid	0°	one motif
13	Stencil ring with bridges	1	One motif	stencil	0°	one motif

Each preset only fills in the fields; change the size, ratio or colours afterwards.

Lobe ratio for a 3 in motif

Ratio	Circle radius	Centre distance	Where the lobes meet	Middle
0.71	0.62 in	0.88 in	0° cusp	gap filled in
0.8	0.67 in	0.83 in	55.77° cusp	gap filled in
1	0.75 in	0.75 in	90° cusp	circles overlap
1.25	0.83 in	0.67 in	111.1° cusp	circles overlap
1.6	0.92 in	0.58 in	127.54° cusp	circles overlap
2	1 in	0.5 in	138.59° cusp	circles overlap

Below a ratio of 1 the four circles leave a small gap in the middle; the motif fills it in, so the outline stays the same.

Repeat layouts (3 in motif, 0.15 in gap)

Layout	Seamless tile	Step
Grid (lobes tip to tip)	3.15 × 3.15 in	3.15 in
Half-drop (every other column moved half a step)	6.3 × 3.15 in	3.15 in
Brick (every other row moved half a step)	3.15 × 6.3 in	3.15 in

Stencil sizes

Motif	Default band	Default bridge	Smallest bridge
3 in	0.15 in	0.19 in	0.125 in
6 in	0.3 in	0.19 in	0.125 in
8 in	0.4 in	0.19 in	0.125 in
10 cm	0.5 cm	0.4 cm	0.3 cm
20 cm	1 cm	0.4 cm	0.3 cm

For a stencil from your own picture, use the Stencil Maker. For star patterns, try the Islamic Geometric Pattern Generator.

Which tool to use

You want	Use
Quatrefoil repeats, tiles or a quatrefoil stencil	Quatrefoil Pattern (this page)
Diamond harlequin patterns or a wall plan	Harlequin Pattern
Star and rosette patterns	Islamic Geometric Pattern Generator
Simple CSS background patterns	SVG Pattern Generator
A quatrefoil design to colour in	Pattern Coloring Pages

Also handy: the SVG Pattern Generator and Pattern Coloring Pages.

Frequently asked questions

What is a quatrefoil?

A four-lobed shape: the overall outline of four partially overlapping circles of the same diameter. It is common in Gothic and Renaissance architecture, and as a repeat on fabric and wallpaper.

What does the lobe ratio do?

It is the circle radius divided by the distance from the motif centre to each circle centre. At 0.71 (1/√2) the circles only touch, so the lobes meet smoothly; higher values give rounder lobes with a sharper point between them. The table above shows the angle at that point.

Are the curves exact?

Each lobe is an arc of a true circle and the lobes join where the circles cross. In the PDF and SVG the arcs are drawn as curve pieces of at most 45°, which stay within 0.001% of the circle (tested).

Will the tile repeat without a seam?

Yes. The SVG tile is one full repeat of the layout you chose; copies placed edge to edge join with no seam. Our tests compare the tile with the pattern one repeat over at thousands of points.

What are the bridges on the stencil?

An outline ring would leave the centre loose when you cut it out. Four bridges across the lobe tips keep the centre joined to the sheet. Our test checks that the sheet stays in one piece and that each bridge is at least the stated minimum width.

Which repeat should I choose?

Grid lines the motifs up in rows and columns, lobe tip to lobe tip. Half-drop moves every other column down by half a step and brick moves every other row across by half a step, for a less regular look. A gap of 0 makes the lobe tips touch.

Is there a pointed or Moroccan trellis version?

Not yet. We only draw shapes we can construct exactly, and the pointed Gothic quatrefoil and the trellis lattice use different constructions.

How is this different from the islamic geometric pattern generator?

That tool draws 6-, 8- and 12-fold star patterns from straight lines. This page draws curved four-lobed quatrefoils from circles, with a stencil option.

Is it free?

Yes. There is no sign-up, no watermark and no limit.

Is anything uploaded?

No. Everything is drawn by JavaScript in your browser and nothing is sent anywhere.