SVG pattern generator

How to make a pattern

1. The page opens on dots. Press another pattern to change it: stripes, checks, zigzag or scatter.
2. Choose the scale (how often it repeats) and the weight (how much ink).
3. For stripes, choose which way they run. For a scatter, press “Another one” to drop the dots afresh.
4. Under Fine-tune, set the size of the picture and the two colours, or leave out the background.
5. Download the SVG, or copy its code.

How the file repeats

The SVG uses the <pattern> element, which is how SVG itself describes a repeating fill. One square tile is drawn once, inside <defs>, and a single rectangle the size of the picture is filled with it; the browser lays the tile side by side as often as it takes. So the file stays tiny however large the picture: 800 × 600 pixels of medium dots is under 400 bytes. The guide to SVG patterns explains the element.

The tile is measured in the picture’s own pixels (patternUnits="userSpaceOnUse"), so a medium pattern repeats every 32 pixels, a small one every 16 and a large one every 64, whatever the size of the picture. To cover a bigger area at the same scale, raise the width and height. To make the marks bigger, raise the scale.

The five patterns

• Dots. One round dot in the middle of each tile. At medium weight its width is 40% of the tile, which covers 12.6% of the area.
• Stripes. One band to a tile, upright, level or slanted at 45°. The weight is the band’s share of the repeat: at medium, 40% ink and 60% gap.
• Checks. Two squares to a tile, corner to corner: a chessboard, always half ink and half background.
• Zigzag. A line that climbs and falls once in each tile, with sharp corners. The line is drawn on past both sides of the tile so that it turns a clean corner where two tiles meet.
• Scatter. Dots dropped at random with a gap of at least a quarter of a dot’s width between any two, on a tile four times the scale. A dot that crosses the tile’s edge is drawn again on the opposite side, so the scatter repeats without a visible join. Where the dots fall comes from a seed, shown beside the result; the same seed gives the same scatter.

Where a pattern fill works, and where it does not

As a picture, it works in an image tag, as a CSS background, and in drawing programs that read SVG patterns, such as Inkscape. To use the pattern on a shape of your own, copy the <defs> block into your SVG and set that shape’s fill to url(#tile).

A pattern fill is paint, not shapes. A cutting machine or a pen plotter follows outlines and takes no notice of how a shape is filled, so it will see this file as one plain rectangle. For those, the dots or stripes have to exist as separate shapes, and this page does not write that kind of file.

With “No background” ticked the gaps between the marks are see-through, and the pattern takes on whatever lies behind it.

Questions

Related

• SVG patterns: the pattern element explained
• SVG wave generator
• SVG shape generator
• Using an SVG as a CSS background
• All tools