Eyks | 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:

<stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,175,255);stop-opacity:1" />

1 2	<stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(0,175,255);stop-opacity:1" />

SVG Gradient – x1 y1 x2 y2 visualised