> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/theme-settings/patterns.md).

# Patterns

Patterns are lightweight SVG tiles used as palette-aware backgrounds on banners and components. They are terms in the **Pattern** vocabulary: *Manage → Structure → Taxonomy → Pattern → Add term* (`/admin/structure/taxonomy/manage/pattern/add`).

See patterns on the demo site: <https://govcms.convivial.io/demo/patterns>

![Adding a pattern](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-1d9b974e522a8adf0445622a1b1bbcb0aa93bb17%2Fpattern-add.png?alt=media)

1. Upload the SVG to **Tile** as a **File** media item. The tile is used as a mask: only the shapes' opacity is read, and they are painted in the palette's *Background stronger* colour, so any colour in the file is ignored — this keeps contrast accessible. Two rules for the artwork:
   * Shapes must be fully opaque — `fill="none"` or any transparency masks the shape out. Use outlines, not strokes.
   * Run every path past the edge of the tile and let it clip, or a visible seam appears where the tile repeats.
2. Set the tile **Size** in rem (from 0.25, in quarter steps) and its **Position**. Several patterns can share one tile at different sizes — make a term per variant.
3. Set **Repeat X** and **Repeat Y**:
   * **Space** — the tile keeps its size; only whole tiles are drawn and the leftover space becomes even gaps.
   * **Round** — the tile is rescaled so there are no gaps. Each axis rounds independently, so the tile may distort slightly.
   * **Repeat** — the tile keeps its size with no gaps; the overflow is clipped at the edge of the component.

![Patterns in use](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-ae41df5290940692f91e7144ff9e8db74438e59c%2Fpatterns.png?alt=media)

Editors apply a pattern from the **Pattern** field under a component's **Presentation** — see [Presentation](/convivial-for-govcms/content-editing/components/presentation.md). The page banner takes its pattern from the skin's **Regions** tab instead. Combine patterns with textures for richer backgrounds.