paper.defineGradient(gradientDefinition)

Define an SVG gradient for later reuse within the paper. The method returns the gradient id and the gradientDefinition must have the following form:

{
    type: <type of gradient>,
    stops: <stop colors>,
    attrs: <additional attributes>
}

Where type is either 'linearGradient' or 'radialGradient', attrs is an object containing additional SVG attributes for the SVG gradient element and stops is an array of the ramps of color on the gradient. Each stop object is of the form:

{
    offset: <offset>,
    color: <color>,
    opacity: <opacity>
}

Where offset is a string representing the offset of the gradient stop, color indicates what color to use at that gradient stop and opacity is a number in the [0..1] range representing the transparency of the stop color. Example use:

var gradientId = paper.defineGradient({
    type: 'linearGradient',
    stops: [
        { offset: '0%', color: '#E67E22' },
        { offset: '20%', color: '#D35400' },
        { offset: '40%', color: '#E74C3C' },
        { offset: '60%', color: '#C0392B' },
        { offset: '80%', color: '#F39C12' }
    ]
});

svgNode.setAttribute('fill', 'url(#' + gradientId + ')');

For an introduction to gradients, please refer to the tutorial on Filters and Gradients.