Create

Function

@ux, @uy

The pointer position over the doodle, in pixels from its top-left corner, updated as the pointer moves.

Syntax

  • @ux, @ux(<operation>, ...)
  • @uy, @uy(<operation>, ...)

The values are unitless numbers in CSS variables, so multiply by 1px to get a length, or divide by @uw and @uh for a 0–1 ratio. They start at 0 until the pointer first moves over the element. Inside $() the math around them is written out as CSS math, so $deg(@ux - @uy) is an angle that follows the pointer.

Examples

Move the pointer over the doodles:

@grid: 1 / 60vmin;
@size: 20%;
@place: @ux(*1px) @uy(*1px);
border-radius: 50%;
background: #000;
Open in playground

Or, with a little math, to color a gradient:

@grid: 1 / 60vmin;
background: conic-gradient(
  from $deg(@ux - @uy),
  hsl($deg(@ux * 2), 85%, 55%),
  hsl($deg(120 + @uy * 2), 85%, 65%),
  hsl($deg(240 + @ux + @uy), 85%, 45%),
  hsl($deg(@ux * 2), 85%, 55%)
);
Open in playground

See also