Learn D3.js

Gradients

Linear gradients are created perpendicular to a line, so it requires the same attributes as the <line> element. Radial gradients use circle attributes. Gradients should declare at least one child <stop> with a non-zero offset and stop-color different than black, since the default color is black and the default offset is zero. Typically, gradients declare two or more stop colors. Gradients are used used as a fill or stroke value. They are usually defined in <defs> with an id that can be referenced later using url(#id).

The following SVG code declares two gradients and applies one of them to a square, and the other to a circle:

<svg width="600" height="300">    <defs>        <linearGradient x2="1" id="rainbow"> <stop offset="0" stop-color="rgb(255,0,0)" ...