Paper.gradient(gradient)

Creates a gradient element

Parameters

1. gradientstringgradient descriptor

Gradient Descriptor

The gradient descriptor is an expression formatted as follows: <type>(<coords>)<colors>. The <type> can be either linear or radial. The uppercase L or R letters indicate absolute coordinates offset from the SVG surface. Lowercase l or r letters indicate coordinates calculated relative to the element to which the gradient is applied. Coordinates specify a linear gradient vector as x1, y1, x2, y2, or a radial gradient as cx, cy, r and optional fx, fy specifying a focal point away from the center of the circle. Specify <colors> as a list of dash-separated CSS color values. Each color may be followed by a custom offset value, separated with a colon character.

Examples

Linear gradient, relative from top-left corner to bottom-right corner, from black through red to white:

var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");

var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25-#fff");

var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");

paper.circle(50, 50, 40).attr({
fill: g
});