@svg-polygon

Syntax

• @svg-polygon(<shape commands>)
• @svg-polygon(<preset>[; <shape commands>])

The commands are those of @shape, except frame, plus the SVG attributes in the table below. points goes up to 65536.

Stroke and fill

Without a stroke the outline is black, since a background image doesn't inherit color. stroke-width is in the -1 to 1 space of the shape:

@grid: 3 / 60vmin _1px;
background: @svg-polygon(
  points: @pn(3, 4, 5, 6, 7, 8, 9, 10, 12);
  stroke-width: .04;
);

fill paints the inside, which is empty by default:

@grid: 1 / 60vmin;
background: @svg-polygon(
  points: 200;
  r: cos(4t);
  stroke: #e6437d;
  stroke-width: .02;
  fill: #000;
);

Contours

With several contours, or a group that leaves more than one outline, the shape is one <path> with a subpath for each. Under fill-rule: evenodd the inner one is a hole:

@grid: 1 / 60vmin;
background: @svg-polygon(
  points: 120;
  r: 1, .6;
  fill-rule: evenodd;
  fill: #000;
  stroke: #e6437d;
  stroke-width: .03;
);

Presets

Commands after a preset name add to it, as in @shape:

@grid: 3 / 60vmin _2px;
background: @svg-polygon(
  @p(star, heart, hexagon);
  scale: .9;
  stroke-width: .05;
  fill: @p(#e6437d, #ebbf4d);
);

Reference

See also

• @shape
• @svg