Open the app

Textures

Fine-tune, Shape, with Lines, Topography or Checkers picked

Three shapes make fine textures rather than a field of shapes: Lines, Topography and Checkers. They take your colours, Opacity, zones and Shuffle like any other shape, so a clear zone still fades them out behind your headline.

The Shape group with Lines picked: the texture settings sit under the shape picker

The three textures

Lines are parallel lines, straight or wavy, in any direction. Topography draws contour lines over a random landscape, like a map. Checkers are small squares on a checker grid. Picking one sets a fine scale and a line width that suit it, and going back to another shape puts back the scale you had. The Looks panel has one of each to start from: Diagonal lines, Wavy lines, Topography and Tiny checkers.

Lines, straight
Lines, wavy
Lines, diagonal
Topography
Checkers

Scale

For a texture, Scale is the distance between lines, contours or squares, down to 4 pixels (10 for Topography). Line width and square size are a share of it, so a texture keeps its look as you scale it up or down. The Scale slider in the bar above the canvas covers the same range.

8 px
12 px
20 px

Line width

For Lines and Topography: how thick each line is, as a share of Scale. The hint under the slider gives the width in pixels.

8%
18%
40%

Waviness

For Lines: how far each line swings, as a share of Scale. 0% is straight. Neighbouring lines wave together, so they never touch.

0%, straight
30%
60%

Wave length

For wavy Lines, so it shows once Waviness is above 0: the length of one wave, in multiples of Scale. The hint gives it in pixels.

4 × Scale
8 × Scale
14 × Scale

Direction

For Lines: four buttons turn them across, diagonally up, down the page or diagonally down. Rotation, under More options, turns them to any other angle.

Horizontal
Diagonal up
Vertical
Diagonal down

Topography

Contour lines of a random landscape, about Scale apart, like the height lines on a map. Where the land is steep the lines crowd together; on flat ground they spread out and close into loops. Shuffle, at the right of the bar above the canvas, draws a new landscape.

Scale 14 px
Scale 22 px
Scale 36 px
One landscape
Shuffle
Shuffle again
Shuffle, at the right end of the bar above the canvas. The shortcut is S.

Square size

For Checkers: the side of each square, as a share of Scale. 25% gives the classic tiny checkers; 50% fills the gaps into a full checkerboard.

15%
25%
50%

What textures leave out

Gap, Jitter, Corner radius, Fill (outlines) and Gradient fill per shape would break a line into pieces, so they are hidden while a texture is picked, and a texture draws without them. Size range and Rotation jitter, under Variation, still work, but they turn lines into dashes.

Repeating tiles

Lines and Checkers can also be exported as a small repeating tile for background-repeat: Use on my site, Code, then Repeating tile. Lines keep their direction in a tile when they run across, down or diagonally. A diagonal tile is a square chosen so its lines meet the next tile exactly; for wavy diagonal lines the tile may make the waves up to 3% longer or shorter to fit, and the dialog says when it does. At any other angle a tile's lines run across. Topography does not repeat, so it has no tile.

The Repeating tile dialog with diagonal lines: the tile keeps their direction and repeats without a seam

File size

A texture has many more marks than a field of shapes, so its SVG is larger: the four texture looks are 80 to 180 KB for a 1440 × 640 hero. The repeating tile is much smaller, and suits very fine Lines and Checkers best.