Create

Function

@reverse

The arguments in reverse order, or an SVG path with its commands reversed.

Syntax

  • @reverse(<value>, ...)
  • @reverse(<path data>)

When the arguments parse as SVG path data the commands are emitted from last to first, with a leading moveto and a closing z kept in place; otherwise the argument list is reversed. A leading lineto, as in @arc data, stays in place like a moveto.

The values of each command are kept as they are, so this is not the same path drawn backwards. With relative commands, h 10 v 5 becomes v 5 h 10: the path starts and ends at the same points, and only the route between them changes.

Examples

@grid: 5x1 / 60vmin _1px;
background: @pn.reverse(#000, #333, #666, #999, #ccc);
Open in playground 
@grid: 1x2 / 60vmin _2px;
--colors: #000, #e6437d, #ebbf4d;
@cell(1) {
  background: linear-gradient(90deg, $colors);
}
@cell(2) {
  background: linear-gradient(90deg, @reverse.$colors);
}
Open in playground 
@grid: 4 / 60vmin _2px;
background: @svg(
  viewBox: -2 -2 34 34;
  --path: M 0 0 h 10 v 10 h 5 v 5 h 10 v 10;
  path {
    d: @p($path, @reverse.$path);
    fill: none;
    stroke: #000;
    stroke-width: 3;
  }
);
Open in playground

See also