css-doodle

Create

Function

@udx, @udy

The offset from the pointer to the center of the current cell, in pixels. Positive @udx means the cell is to the right of the pointer; positive @udy means below it.

Syntax

  • @udx, @udx(<operation>, ...)
  • @udy, @udy(<operation>, ...)

@udx is (@x - .5) / @X * @uw - @ux, and @udy the same for @y. Both take the same operations as @i. They start as if the pointer is at the top-left, until it first moves over the doodle.

Examples

Move the pointer. Distance from it in pixels:

@grid: 16 / 60vmin;
background: #000;
border-radius: 50%;

--d: hypot(@udx, @udy);
scale: calc(max(0, 1.1 - var(--d) / @uw * 1.5));
Open in playground

Angle toward the pointer:

@grid: 9 / 60vmin;
@size: 70% 2px;
background: #000;
margin: auto;
rotate: atan2(@udy, @udx);
Open in playground

See also