css-doodle

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.

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 calc((@ux - @uy) * 1deg),
  hsl(calc(@ux * 2deg), 85%, 55%),
  hsl(calc(120deg + @uy * 2deg), 85%, 65%),
  hsl(calc(240deg + (@ux + @uy) * 1deg), 85%, 45%),
  hsl(calc(@ux * 2deg), 85%, 55%)
);
Open in playground

See also