css-doodle

`auto:update`

Re-render the doodle on a fixed interval.

Syntax

<css-doodle auto:update></css-doodle>
<css-doodle auto:update="<interval>"></css-doodle>

interval: A duration in ms, s or m. A bare number is milliseconds. Default 2000, minimum 500.

A manual update() or a click:update restarts the timer. Removing the attribute stops it.

Examples

<css-doodle click:update auto:update="2s">
  @grid: 5 / 60vmin;
  @size: 19%;
  @content: @i;
  background: #000;
  color: #fff;
  transition: @r(1s);
  @place: @pd.m5x5(
    @nx(*20%, -10%) @ny(*20%, -10%)
  );
  rotate: @p(0, 90deg, 180deg, 270deg);
</css-doodle>

@grid: 5 / 60vmin; @size: 19%; @content: @i; background: #000; color: #fff; transition: @r(1s); @place: @pd.m5x5( @nx(*20%, -10%) @ny(*20%, -10%) ); rotate: @p(0, 90deg, 180deg, 270deg);

See also