{"route":"/en-US-v0.14.1/reference/visualize/tiling/","title":"Tiling","description":"Documentation for the Tiling type.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"examples","name":"Examples","children":[]},{"id":"relativeness","name":"Relativeness","children":[]},{"id":"compatibility","name":"Compatibility","children":[]},{"id":"constructor","name":"Constructor","children":[{"id":"constructor-size","name":"size","children":[]},{"id":"constructor-spacing","name":"spacing","children":[]},{"id":"constructor-relative","name":"relative","children":[]},{"id":"constructor-body","name":"body","children":[]}]}],"body":{"kind":"type","content":{"name":"tiling","title":"Tiling","keywords":["pattern"],"oneliner":"A repeating tiling fill.","details":"

A repeating tiling fill.

\n

Typst supports the most common type of tilings, where a pattern is repeated\nin a grid-like fashion, covering the entire area of an element that is\nfilled or stroked. The pattern is defined by a tile size and a body defining\nthe content of each cell. You can also add horizontal or vertical spacing\nbetween the cells of the tiling.

\n

Examples

\n
#let pat = tiling(size: (30pt, 30pt))[\n  #place(line(start: (0%, 0%), end: (100%, 100%)))\n  #place(line(start: (0%, 100%), end: (100%, 0%)))\n]\n\n#rect(fill: pat, width: 100%, height: 60pt, stroke: 1pt)\n
\"Preview\"
\n

Tilings are also supported on text, but only when setting the\nrelativeness to either auto (the default value) or\n"parent". To create word-by-word or glyph-by-glyph tilings, you can\nwrap the words or characters of your text in boxes manually or\nthrough a show rule.

\n
#let pat = tiling(\n  size: (30pt, 30pt),\n  relative: "parent",\n  square(\n    size: 30pt,\n    fill: gradient\n      .conic(..color.map.rainbow),\n  )\n)\n\n#set text(fill: pat)\n#lorem(10)\n
\"Preview\"
\n

You can also space the elements further or closer apart using the\nspacing feature of the tiling. If the spacing\nis lower than the size of the tiling, the tiling will overlap.\nIf it is higher, the tiling will have gaps of the same color as the\nbackground of the tiling.

\n
#let pat = tiling(\n  size: (30pt, 30pt),\n  spacing: (10pt, 10pt),\n  relative: "parent",\n  square(\n    size: 30pt,\n    fill: gradient\n     .conic(..color.map.rainbow),\n  ),\n)\n\n#rect(\n  width: 100%,\n  height: 60pt,\n  fill: pat,\n)\n
\"Preview\"
\n

Relativeness

\n

The location of the starting point of the tiling is dependent on the\ndimensions of a container. This container can either be the shape that it is\nbeing painted on, or the closest surrounding container. This is controlled\nby the relative argument of a tiling constructor. By default, tilings\nare relative to the shape they are being painted on, unless the tiling is\napplied on text, in which case they are relative to the closest ancestor\ncontainer.

\n

Typst determines the ancestor container as follows:

\n\n

Compatibility

\n

This type used to be called pattern. The name remains as an alias, but is\ndeprecated since Typst 0.13.

","constructor":{"path":[],"name":"tiling","title":"Construct","keywords":[],"oneliner":"Construct a new tiling.","element":false,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"

Construct a new tiling.

"},{"kind":"example","content":{"body":"
#let pat = tiling(\n  size: (20pt, 20pt),\n  relative: "parent",\n  place(\n    dx: 5pt,\n    dy: 5pt,\n    rotate(45deg, square(\n      size: 5pt,\n      fill: black,\n    )),\n  ),\n)\n\n#rect(width: 100%, height: 60pt, fill: pat)\n
\"Preview\"
","title":null}}],"self":false,"params":[{"name":"size","details":[{"kind":"html","content":"

The bounding box of each cell of the tiling.

"}],"types":["auto","array"],"strings":[],"default":"auto","positional":false,"named":true,"required":false,"variadic":false,"settable":false},{"name":"spacing","details":[{"kind":"html","content":"

The spacing between cells of the tiling.

"}],"types":["array"],"strings":[],"default":"(0pt, 0pt)","positional":false,"named":true,"required":false,"variadic":false,"settable":false},{"name":"relative","details":[{"kind":"html","content":"

The relative placement of the tiling.

\n

For an element placed at the root/top level of the document, the\nparent is the page itself. For other elements, the parent is the\ninnermost block, box, column, grid, or stack that contains the\nelement.

"}],"types":["auto","str"],"strings":[{"string":"self","details":"

Relative to itself (its own bounding box).

"},{"string":"parent","details":"

Relative to its parent (the parent's bounding box).

"}],"default":"auto","positional":false,"named":true,"required":false,"variadic":false,"settable":false},{"name":"body","details":[{"kind":"html","content":"

The content of each cell of the tiling.

"}],"types":["content"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["tiling"],"scope":[]},"scope":[]}}}