Open the app

Shape

Fine-tune, Shape

The Shape group picks the shape and sets its size and spacing. Fill style, stretch, rotation, position and jitter are under More options.

The Shape group in Fine-tune, with Triangles picked

Shapes

Tilings such as triangles, squares and hexagons cover the whole area. Circles, crosses and halftone dots sit apart with space between them. Delaunay and Voronoi are irregular: Delaunay joins scattered points into triangles, Voronoi grows a cell around each point like pebbles. Lines, Topography and Checkers are fine textures with settings of their own: see Textures. Custom uses any SVG path you paste in. Under each example is its tile in the shape picker.

Triangles
Squares
Bricks
Diamonds
Hexagons
Circles
Halftone dots
Cubes
Octagons
Crosses
Chevrons
Delaunay
Voronoi
Lines
Topography
Checkers

Scale

The size of each shape in pixels, at the design's full size. For halftone dots this setting is called Spacing. The Scale slider in the bar above the canvas sets the same value.

24 px
48 px
96 px

Gap

Space between neighbouring shapes, in pixels. The gap stays even all the way round each shape, so a tiling turns into separate tiles with a grout line between them.

0 px
3 px
8 px

Hexagons: flat or pointy top

Only for hexagons. Flat top puts a flat edge at the top of each hexagon; pointy top turns them so a corner points up.

Flat top
Pointy top

Packing

For circles, crosses, halftone dots and custom shapes. Square grid lines shapes up in rows and columns. Hex grid shifts every other row by half a step, which packs them more tightly.

Square grid
Hex grid

Evenness

Only for Voronoi. At 0 the cells are irregular, some large and some small. Higher values relax the points so the cells come out closer in size.

0
3
6

Small squares

Only for octagons. Octagons leave small square gaps between them; this sets how strong those squares are compared with the octagons. 0% hides them.

0%
50%
100%

Fill

More options

Solid fills each shape. Outline draws only its edge, at the stroke width you set. Mixed draws some shapes as outlines and the rest solid; Drawn as outlines sets the share. Textures are always solid.

Solid
Outline, 1.5 px stroke
Mixed, 30% outlines

Corner radius

More options

Rounds the corners of every shape. It does nothing to circles and halftone dots, which have no corners, or to textures.

0 px
5 px
14 px

Stretch X and Stretch Y

More options

Stretch the grid sideways or up and down. 1 keeps the shapes in proportion. Halftone dots stay round when stretched; only their spacing changes. Delaunay and Voronoi have no grid, so these do not apply.

Stretch X 0.6
Stretch X 1
Stretch X 1.6

Rotation

More options

Turns the whole grid, in degrees. For halftone dots this is called Screen angle and sits in the main group.

0°
20°
45°

Offset X and Offset Y

More options

Slide the pattern inside the artboard, in pixels, without changing it. Use it to put a whole shape, rather than a cut-off one, at an edge or behind a logo. Drag the pattern does the same on the canvas, as does holding Shift + Space and dragging.

Offset X and Y, then Jitter and Drag the pattern, at the end of More options

Jitter

More options

Moves each grid point by a random amount, up to the percentage of a cell you set. Tilings stay gap-free because neighbouring shapes share their moved corners, so straight rows turn into a hand-made, low-poly look.

0%
20%
40%

Custom shape

Pick Custom in the shape list, then Edit custom shape (or Custom shape in the menu) and paste the d attribute of an SVG path, such as a logo mark or an icon. The shape is scaled to fit each grid cell. Very detailed paths make the SVG file larger.

Edit custom shape, under the shape picker once Custom is picked