Create

Function

@plot, @Plot

One point of a shape per cell or per @m step. @plot returns percentages of the element, with the center at 50% 50%. @Plot returns the same points as raw numbers in the -1 to 1 space. The .scatter variant spreads the points inside the shape instead of along its outline.

Syntax

  • @plot([points: <n>; ]<shape commands>)
  • @plot(<preset>)
  • @plot.scatter([points: <n>; ]<shape commands>)
  • @plot.scatter(<preset>)
  • @Plot(…), @Plot.scatter(…)
shape commands
The same commands as @shape: r, x, y, rotate, scale, move, turn, dir and variables.
preset
A name from the @shape property, such as heart or star. The cells follow its outline, one point each.
points
When given, all points are returned as one comma-separated list instead of one point per cell; split is the same. With .scatter, only points does this, and it is the number of points spread inside the shape. In @shape it counts the outline's corners instead, so leave it out of a body copied from there.
dir
How @place rotates the cell. auto turns its x axis away from the center, reverse toward it, and auto 90deg adds an angle, which on a circle runs along the path. A constant angle is offset by 90°: dir: 0 turns every cell 90deg. Defaults to auto, except with .scatter. direction is the same name.

Use @plot with @place and other CSS positions. Use @Plot inside @svg. A unit command, or a unit on r such as r: 10px, sets the unit on either; any unit but % gives raw numbers centered at 0 0. @offset and @point are aliases of @plot.

.scatter follows the doodle's seed, or a seed command: the same seed, shape and count give the same points, ordered from the top row down. It does not rotate cells unless dir is given, and returns at most 8192 points. density, relax and aspect work as in @tile.voronoi: density: 1 - y puts more points near the bottom.

Examples

Cells placed on a circle:

@grid: 24x1 / 60vmin;
@size: 8%;
border-radius: 50%;
background: #000;
@place: @plot(r: .8);
Open in playground

Each cell faces away from the center, since dir defaults to auto. With reverse the triangles point inward:

@grid: 12x1 / 60vmin;
@size: 20% 15%;
background: #000;
clip-path: polygon(0 0, 100% 50%, 0 100%);
@place: @plot(
  r: .8;
  dir: reverse
);
Open in playground

A spiral, using the point index:

@grid: 50x1 / 60vmin;
@size: 5px;
border-radius: 50%;
background: #000;
@place: @plot(
  r: sin(-t/2);
  move: 0 -.3;
  rotate: 90;
);
Open in playground

Cells along the outline of a preset:

@grid: 40x1 / 60vmin;
@size: 4%;
border-radius: 50%;
background: #e6437d;
@place: @plot(heart);
Open in playground

Cells spread inside the same shape with .scatter:

@grid: 120x1 / 60vmin;
@size: 4%;
border-radius: 50%;
background: #e6437d;
@place: @plot.scatter(heart);
Open in playground

Points as background positions inside one cell:

@grid: 1 / 60vmin;
background: @m50(
  radial-gradient(#000 50%, #0000 0)
  @plot(r: .8) / 5px 5px
  no-repeat
);
Open in playground

Raw coordinates for an SVG:

@grid: 1 / 60vmin;
background: @svg(
  viewBox: -1.1 -1.1 2.2 2.2;
  circle*40 {
    cx, cy: @Plot(r: cos(3t); scale: .9);
    r: .04;
    fill: #000;
  }
);
Open in playground

See also