`@svg-polygon`

An SVG image containing one polygon, drawn from the same commands as @shape. Unlike a clip-path it can have a stroke.

Syntax

shape commands: A preset name, or the split, r, x, y, rotate, scale and other commands of @shape.
stroke, stroke-width, fill, …: Presentation attributes copied to the polygon. Defaults: stroke: currentColor, stroke-width: .01, fill: none.
padding: Extra space around the shape, in the coordinate space where the shape spans -1 to 1. Defaults to half the stroke width.

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

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

Rotated presets with a fill:

@grid: 4 / 60vmin _2px;
background: @svg-polygon(
  @p(star, heart, hexagon);
  fill: @p(#000, #e6437d);
  stroke: none;
  rotate: @r(360);
);