SVG Gradient – x1 y1 x2 y2 visualised


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


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: