What Makes a Pattern Seamless?
A pattern is seamless when its tile edges — top, bottom, left, right — connect perfectly with adjacent copies. Any shape that crosses an edge must re-enter from the opposite edge at exactly the same position. This is the fundamental constraint of tileable design, rooted in the mathematics of wallpaper groups (17 symmetry groups in 2D).
The SVG Tile Box
In SVG, the tile box is defined by the width and height of the <pattern> element. The browser repeats this box edge-to-edge. Any drawing that extends past the tile boundary is automatically clipped, not wrapped — so for seamless patterns you must manually mirror shapes that cross edges.
<!-- Seamless dot pattern: dots at corners + center wrap correctly -->
<svg width="20" height="20">
<circle cx="0" cy="0" r="4" fill="#6366f1"/> <!-- TL corner -->
<circle cx="20" cy="0" r="4" fill="#6366f1"/> <!-- TR (same as TL in tile) -->
<circle cx="0" cy="20" r="4" fill="#6366f1"/> <!-- BL -->
<circle cx="20" cy="20" r="4" fill="#6366f1"/> <!-- BR -->
<circle cx="10" cy="10" r="4" fill="#6366f1"/> <!-- Center -->
</svg>Symmetry Types Explained
The 17 wallpaper groups describe every possible way to tile a plane with symmetry. The most commonly used in web design are: p1 (translation only — simple repeat), p2 (180° rotation), pm (mirror reflection), pg (glide reflection, like herringbone), and p4m (square symmetry with mirrors, like moroccan tiles). Understanding these helps you design more interesting patterns.
The Offset Grid Technique
Many beautiful patterns use an offset grid — each row is shifted by half a tile width (like bricks). In SVG, achieve this by drawing elements at negative x positions that are clipped out of the tile but continue in the next tile. The key: the tile width must accommodate two half-rows. Hexagonal grids use a 1/3 vertical offset.
Using <use> for Pattern Efficiency
Define one shape in <defs> and reuse it at multiple positions with <use>. This dramatically reduces file size for complex patterns. A single detailed motif defined once and instanced 8 times costs far less bandwidth than 8 separate shape definitions.
Testing Seamlessness
To verify your pattern tiles seamlessly, temporarily set a very large background-size in a browser and zoom out — seams become obvious at scale. Alternatively, open the SVG in Inkscape and use the "Tile Clones" feature to see a 4×4 grid of your tile. Any misalignment at edges will be immediately visible.
Diagonal & Hexagonal Tiling
Diagonal patterns require the tile to be rotated. Apply patternTransform="rotate(45)" to the pattern element to rotate the entire tile grid. Hexagonal tiling needs two offset rows in a single tile. The tile height for a hex grid is r × √3 where r is the hexagon circumradius, and alternate rows shift by half the tile width.