While looking at some SVG examples of gradient paints to be tested with Svg2Groovy I discovered that gradients may link to one another in order to reuse stop definitions, neat! which prompted a quick change into linearGradient and radialGradient to do the same, thanks to a new property named linkTo. But the goodies do not stop there, while linking you can add more stops to the new gradient or even override a previous stop at the same offset.



rect( x: 10, y: 10, width: 30, height: 200, borderColor: 'black' ){ linearGradient( x1: 0, y1: 0, x2: 0, y2: 50, id: 'g1' ){ stop( offset: 0, color: 'black' ) stop( offset: 1, color: 'blue' ) } } rect( x: 50, y: 10, width: 30, height: 200, borderColor: 'black' ){ linearGradient( x1: 0, y1: 0, x2: 0, y2: 50, id: 'g2', linkTo: g1 ){ stop( offset: 0.33, color: 'red' ) } } rect( x: 90, y: 10, width: 30, height: 200, borderColor: 'black' ){ linearGradient( x1: 0, y1: 0, x2: 0, y2: 50, id: 'g3', linkTo: g2 ){ stop( offset: 0.66, color: 'darkGreen' ) } } rect( x: 130, y: 10, width: 30, height: 200, borderColor: 'black' ){ linearGradient( x1: 0, y1: 0, x2: 0, y2: 50, id: 'g4', linkTo: g3 ){ stop( offset: 0.66, color: 'orange' ) } } rect( x: 170, y: 10, width: 30, height: 200, borderColor: 'black' ){ linearGradient( x1: 0, y1: 0, x2: 0, y2: 50, id: 'g5' ){ stop( offset: 0, color: color('#000') ) stop( offset: 0.5, color: color('#3A3A3A') ) stop( offset: 1, color: color('#FFF') ) } }
The image shows 5 vertical-oriented gradients, the first one serves as the basis for the next 3, the second gradient links to the first and adds a new stop at offset=0.33, the third one links to the second and adds a new stop at offset=0.66, the fourth one links to the third and overrides the stop at offset=0.66. The last gradient shows another new feature available in color(): the ability to decode hex color literals.

Happy Groovy New Year!