D3.js
Author

(Rocha, 2019, p. 41)

Gradientes

Los degradados lineales se crean perpendicularmente a una línea, por lo que requieren los mismos atributos que el elemento <line>. Los degradados radiales usan atributos circulares. Los degradados deben declarar al menos un elemento secundario <stop> con un offset distinto de cero y un stop-color distinto del negro, ya que el color predeterminado es negro y el offset predeterminado es cero. Normalmente, los degradados declaran dos o más colores de parada. Los degradados se utilizan como valor de fill o stroke. Suelen definirse en <defs> con un id al que se puede hacer referencia posteriormente mediante url(#id).

El siguiente código SVG declara dos degradados y aplica uno de ellos a un cuadrado y el otro a un círculo:

<style>
    svg {
        border: solid 1px lightgray;
    }
</style>
<body>
<h2>SVG circle</h2>
<svg width="600" height="300">
    <defs>
        <linearGradient x2="1" id="rainbow">
            <stop offset="0" stop-color="rgb(255,0,0)" />
            <stop offset="0.25" stop-color="rgb(255,255,64)" />
            <stop offset="0.5" stop-color="rgb(64,255,64)" />
            <stop offset="0.75" stop-color="rgb(64,64,255)" />
            <stop offset="1" stop-color="rgb(128,0,255)" />
        </linearGradient>
        <radialGradient cx="0.35" cy="0.35" r="1" id="glow">
            <stop offset="0" stop-color="rgb(255,255,255)" />
            <stop offset="0.5" stop-color="rgb(0,128,255)" />
            <stop offset="1" stop-color="rgb(128,0,255)" />
        </radialGradient>
    </defs>

    <rect x="0" y="0" width="200" height="200" fill="url(#rainbow)" transform="translate(50,50)"/>
    <circle cx="100" cy="100" r="100" fill="url(#glow)" transform="translate(300,50)"/>
</svg>
</body>

El resultado se muestra en la siguiente captura de pantalla:

SVG circle