css-doodle

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.

Syntax

  • @plot([<points: <n>; ]<shape commands>)
  • @Plot([<points: <n>; ]<shape commands>)
shape commands
The same commands as @shape: r, x, y, rotate, scale, move, turn, dir and variables.
points
When given, all points are returned as one comma-separated list instead of one point per cell. split is the same name.
dir
How @place rotates the cell, like offset-rotate: auto, reverse, auto 90deg, or a constant angle. direction is the same name.

Use @plot with @place and other CSS positions. Use @Plot inside @svg. A unit command on @Plot sets the unit; the default is none.

Examples

Cells placed on a circle:

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

Rotate each cell with dir:

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

A spiral, using the point index:

@grid: 1x50 / 60vmin;
@size: 5px;
border-radius: 50%;
background: #000;
@place: @plot(
  r: sin(-t/2);
  move: 0 -.3;
  rotate: 90;
);
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