css-doodle

Create

Function

@iI, @Ii

The cell index as a ratio between 0 and 1. @iI is @i / @I; @Ii is (@I - @i + 1) / @I, counted backwards. The ratio is the t in linear interpolation: @iI(*360deg) maps the cells onto a full turn.

Syntax

  • @iI, @iI(<operation>, ...), @iI(<easing>, <operation>, ...)
  • @Ii, @Ii(<operation>, ...), @Ii(<easing>, <operation>, ...)
easing
An optional first argument that remaps t before interpolation: linear (the default), ease, ease-in, ease-out, ease-in-out, a cubic-bezier(), or an expression in t such as t^2.
operation
As for @i. Multiply to interpolate from 0: @iI(*360deg) is t × 360deg.

The first cell is 1 / @I, the last is 1. @Ii takes the same arguments.

Examples

@grid: 5 / 60vmin _1px;
background: #000;
opacity: @iI;
Open in playground

Interpolate size across the cells, larger ones behind:

@grid: 10x1 / 60vmin;
@place: center;
@size: @Ii(*100%);
background: #000;
opacity: @iI;
border-radius: 50%;
Open in playground

Easing remaps t before interpolation:

@grid: 1x12 / 60vmin _2px;
@size: @iI(ease-in, *100%) 8px;
background: #000;
Open in playground 
@grid: 1x24 / 60vmin;
@size: 6px;
border-radius: 50%;
background: #000;
@place: safe @iI(*100%) @iI(t^2, *100%);
Open in playground

See also