`@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: The points, r, x, y, rotate, scale and other commands of @shape. frame is ignored; use stroke for an outline. points goes up to 65536.
preset: A name from the @shape property, such as star. A preset takes no other commands, so it is drawn with the defaults below.
stroke, stroke-width, fill, …: Attributes copied to the polygon: names starting with stroke, fill, clip, marker, mask, animate or draw. Others, such as opacity, are dropped. Defaults: stroke: currentColor, stroke-width: .01, fill: none. The polygon is a background image and does not inherit color, so currentColor is black; set stroke for any other color.
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(
  points: 200;
  r: cos(4t);
  stroke: #e6437d;
  stroke-width: .02;
  fill: #000;
);

Presets, drawn with the defaults:

@grid: 3 / 60vmin _2px;
rotate: @r(360deg);
background: @svg-polygon(@p(star, heart, hexagon));