css-doodle

Create

Selector

@random

Cells picked at random, by probability or by count.

Syntax

  • @random { }
  • @random(<ratio>) { }
  • @random(<count>) { }
ratio
A number below 1: each cell is picked independently with this probability. Default .5.
count
A number of 1 or more: exactly this many distinct cells are picked. A count at or above the cell count matches every cell. 0 matches none.

The argument may be an expression over the cell variables, so the probability can vary across the grid. Each occurrence of the selector draws its own cells.

Examples

@grid: 5 / 60vmin _1px;
@content: @i;

@random {
  background: #000;
  color: #fff;
}
Open in playground

Exactly two cells:

@grid: 5 / 60vmin _1px;
@content: @i;

@random(2) {
  background: #000;
  color: #fff;
}
Open in playground

Independent draws for each rule:

@grid: 16 / 60vmin;

@random {
  border-top: 1px solid #000;
}
@random {
  border-left: 1px solid #000;
}
@random(.2) {
  background:
    linear-gradient(#000, #000)
    50% 50% / @r(80%) @lr
    no-repeat;
}
Open in playground

A probability that grows towards the bottom of the grid:

@grid: 24 / 60vmin _1px;

@random(y / Y) {
  background: #000;
}
Open in playground

See also