css-doodle

Create

Function

@svg-pattern

A tiled SVG image: the body describes one tile as a <pattern>, which is repeated to fill the element.

Syntax

  • @svg-pattern(width: <w>; height: <h>; <elements>)

The body is written in the SVG syntax. Declarations at the top level become attributes of the <pattern>, and blocks become its children. The pattern fills a square with a 0 0 1 1 view box, so a width of .25 gives four tiles across, and the coordinates inside a tile are in the same units.

Examples

@grid: 1 / 60vmin;
background: @svg-pattern(
  width, height: .2;
  circle {
    cx, cy: .1;
    r: .06;
    fill: #000;
  }
);
Open in playground 
@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 per cell:

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

See also