css-doodle

Create

Function

@invert

Swap the axes of SVG path data, x ↔ y, which mirrors it along the diagonal through its start point.

Syntax

  • @invert(<path data>)

Every command is transformed: h becomes v and back. Relative commands swap their deltas; absolute commands swap their offset from the start point, so the first M stays where it is. Input that is not path data is returned unchanged.

Swapping axes

h 3 v 3 h 3 v -3 becomes v 3 h 3 v 3 h -3: same lengths, swapped axes. Pink is the original, black the invert. 

@grid: 1 / 60vmin;
background: @svg(
  viewBox: 0 0 10 10;
  --path: M 2 2 h 3 v 3 h 3 v -3;
  fill: none;
  stroke-width: .2;
  path { d: @p(--path); stroke: #e6437d }
  path { d: @invert.p; stroke: #000 }
);
Open in playground

This is a reflection, not a quarter turn. @invert twice restores the original. Combine with @flipH or @flipV to rotate.

A Hilbert curve

A base segment and three transformed copies stay continuous. @p(--base) stores the pick; .p reuses it. @flip.invert.p swaps axes, then flips. The extra v1 joins the middle sections. 

@grid: 1 / 60vmin;
background: @svg(
  viewBox: 0 0 9 9;
  --base: h1 v-1 h-1 v-2 h1 v1 h1 v-1 h1 v2 h-1 v1 h2;
  path {
    d: M 1 8
      @p(--base)
      @flip.invert.p v1
      @reverse.invert.flipH.p
      @reverse.flipH.p;
    fill: none;
    stroke: #000;
    stroke-width: .15;
    stroke-linecap: square;
  }
);
Open in playground

Curves and arcs

Control points and arc radii swap with the axes. The original leaf is pink; black is @invert.p. 

@grid: 1 / 60vmin;
background: @svg(
  viewBox: -24 -24 48 48;
  --leaf: M 0 0 c 0 -14 18 -16 16 -4 a 10 6 0 0 1 -16 4;
  fill: none;
  stroke: #000;
  stroke-width: .8;
  path { d: @p(--leaf); stroke: #e6437d }
  path { d: @invert.p }
);
Open in playground

See also