SVG Gradient – x1 y1 x2 y2 visualised

[av_notification title=’Correction’ color=’blue’ border=” custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=’ue8d2′ font=’entypo-fontello’]
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:

<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" />