Try a colour layer to show how the designspace has been distorted

[Lorp]

First attempt using RGB mixing did not work very well.

Second attempt (43f13fdffaff5f9dd1c01375982fbffab7f3bef9) using HSL mixing worked very well, where we blend a hue from the angle that the transformed location makes in its quadrant (thus the colours are symmetrical about the x-axis and about the y-axis). We’re using the following values for normalized values of x and y.

Hue: When y=0 we want hue=0, when x=0 we want hue=180. When both x and y are non-zero we want x and y to have hue = atan2(y, x) 180 / pi 2. Saturation: We’re using max(x, y).

Lightness: We use 50%.

In the screenshots below, the first shows two untransformed quadrants; the second has a "fenced" rectangle made with 5 mappings. Note that the vertical line defined by the two left markers effectively smears its values all the way to the right. Note also that wdth (the y-axis value) can still vary, as is shown by the vertical gradient within the rectangular zone.

Note: The the *2 factor in the hue calculation transforms [0,90] to [0,180], which gives a wide spread of colours between two complements, from red to light blue via yellow and green. But these values of 0 and 180 are rather arbitrary, and it’s not necessary that we choose complements. See the \<hue> color wheel to consider other values. Maybe from 240 clockwise to 0 would work well (blue to red). Hue values and interpolation direction could be offered to users.)

[Lorp]

Very nice article on colour saved here for reference: Color Formats in CSS by Joshua Comeau.