SVG Gradient – x1 y1 x2 y2 visualised

Correction

Thanks to @woodnathan for pointing out my visualisations confused the starting point of the axis.

Fixed.

Made this to help visualise the start and end gradients for a CSS SVG transformation on hover.

This displays the variations of 0% and 100% of x1 y1 x2 y2 for a linear gradient with: