SVG polar gradients

Question

I\'m a beginner at SVG, but I\'d like to learn some techniques.

To be short, is there a simple way to create something like this?

Answer 1

So this is the solution I developed:

Minified version (395 bytes):

This was made creating circles filled with 256 shades of gray (it sounds like porn literature for coders!) and conveniently placed.

The radii can be adjusted: I've chosen 45 for the whole spinner and 5 for the single circles. Moreover, the detail can be adjusted too if 256 are too many:

for (; i -= 2;) { ...

Use powers of 2 for optimal results. Or just define the number of steps:

var steps = 100, i = steps;
for (; i--;) {
    a = i*2*Math.PI/steps;
    ...
    cir.setAttribute("fill", "rgb(" + i*255/steps + ", " + ...);
}

A big "thank you" to Erik Dahlström for the hint, and thank you Michael Mullany for the attempt :)

Edit: Here's a fiddle to demonstrate the code.

Edit 2: Here's another fiddle using curved segments to create the spinner. You can adjust the number of segments and the size, and even see it spinning. I don't know why when the size is auto, there's a bottom margin of 5 pixels on the SVG, this making the spinning slightly off-centered...