Create

Function

@svg-pattern

An image made of one SVG <pattern> tile, repeated to fill the element. Use it wherever an image is accepted, such as background or mask.

Syntax

  • @svg-pattern(<pattern-body>)

The body is written in the SVG syntax. Declarations at the top level, such as width, height, x, y and patternTransform, become attributes of the <pattern>. Blocks become the shapes in the tile.

The image is a 0 0 1 1 square that covers the element, so width: .25 gives four tiles across. On a non-square element the square is cropped, so tiles stay square. Shapes use the same units, so cx: .1 is the middle of a .2 tile. To draw each tile from 0 to 1 whatever its size, give the pattern viewBox: 0 0 1 1.

Examples

@grid: 1 / 60vmin;
background: @svg-pattern(
  width, height: .2;
  circle {
    cx, cy: .1;
    r: .06;
    fill: #000;
  }
);
Open in playground

Stripes, by rotating the whole pattern:

@grid: 1 / 60vmin;
background: @svg-pattern(
  width, height: .125;
  patternTransform: rotate(45);
  rect {
    width: .125;
    height: .0625;
    fill: #000;
  }
);
Open in playground

A different tile size per cell, with a viewBox so the same path fills each tile:

@grid: 3 / 60vmin _2px;
background: @svg-pattern(
  width, height: @p(.125, .25, .5);
  viewBox: 0 0 1 1;
  path {
    d: M0 0 L1 1 M1 0 L0 1;
    stroke: @p(#000, #e6437d);
    stroke-width: .08;
  }
);
Open in playground

See also