Dégradé circulaire CSS/SVG

Bonjour,
J'aimerais construire différents dégradés circulaires dans des paths.

Voici mon code HTML:

              <g id="nomcal">
                <path id="nomcal3" d="m 98.403409,152.15622 -4.480864,13.79037 a 58,58 0 0 1 40.077145,55.1615 h 14.49988 A 72.5,72.5 0 0 0 98.403409,152.15622 Z" />
                <path id="nomcal4" d="m 93.922545,165.94659 -4.480864,13.79038 a 43.5,43.5 0 0 1 30.058109,41.37112 h 14.4999 a 58,58 0 0 0 -40.077145,-55.1615 z" />
                <path id="nomcal5" d="m 89.441681,179.73697 -4.480862,13.79037 a 29,29 0 0 1 20.038571,27.58075 h 14.49989 A 43.5,43.5 0 0 0 89.441681,179.73697 Z" />
                <path id="nomcal6" d="m 84.960819,193.52734 -8.839771,27.20558 a 0.5,0.5 0 0 1 0.368969,0.37517 H 104.99939 A 29,29 0 0 0 84.960819,193.52734 Z" />
              </g>

J'aimerais que chaque path (il s'agit de rectangles courbés pour les 3 premiers et d'un secteur de cercle pour le dernier) ait son propre dégradé.

Pour le moment, je n'arrive même pas à faire apparaitre le dégradé avec mon css. J'ai tenté background, background-color ou encore radial-gradient en utilisant l'ID de chaque path mais rien à faire...

HELP PLEASE !!!
Merci à vous !