css-doodle

Create

Function

@t, @ts, @T, @TS

Milliseconds since the doodle rendered (@t), or since midnight local time (@T). The s forms (@ts, @TS) are the same values in seconds. @t restarts with every update; @T does not, so doodles stay in step across updates and reloads.

Syntax

  • @t, @t(<operation>, ...)
  • @ts, @ts(<operation>, ...)
  • @T, @T(<operation>, ...)
  • @TS, @TS(<operation>, ...)

The values are unitless numbers in CSS variables, updated 120 times a second by a CSS animation. They take the same operations as @i, so @t(*.1deg) is an angle and @t(%360deg) wraps with mod().

Both animations last one day and then repeat, so a value used on its own starts over after 24 hours.

Examples

A wave: the index offsets each cell in the cycle.

@grid: 20x1 / 60vmin;
@gap: 1px;
@size: 100% 20%;
background: #000;
margin: auto;
translate: 0 calc(100% * sin(3*@t(/30, +@i(*8), %360deg)));
Open in playground

@dx and @dy place each cell in the grid, so @atan2(@dy, @dx) is its angle around the center. Adding @t(/500) turns that angle into a ripple that sweeps outward. 

@grid: 21 / 60vmin;
border-radius: 50%;
background: #000;
scale: sin(@atan2(@dy, @dx) + @t(/500));
Open in playground

See also