Creating a heavily segmented ring/circle

Question

I need to recreate the above image using HTML, CSS, SVG, or some other similar means. It'll be solely for visual purposes, not needing any type of actual functionality. Preferably the non-white parts would be transparent so that I could easily change the background color and have other elements within the center

The reason why I cannot use a transparent image is because I need to be able to easily scale it and possibly change the color of the bars with little trouble

I know how to do approximately the same thing using this CSS approach, but that would require a separate element for every single segment which I do not want.

The other option I thought up would be to create a doughnut graph in Raphael.js with a whole lot pieces in it, but that also seems like a lot of work for the simple outcome that I want

So before I start a long and complex process using one of the methods I mentioned, is there a simpler, more optimized way to create the effect I desire? I'm not asking for the finished output, merely insight as to what methods are optimal to create this type of effect

Edit

The optimal solution would be a pure CSS approach that does not require a separate element for each segment. Otherwise the answers provided are great solutions!

Answer 1

You could just do this with stroke-dasharray:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="30" stroke-dasharray="0.628" stroke-width="2" 
            fill="none" stroke="black"/>
</svg>

Example: http://jsfiddle.net/75WsM/

Answer 2

Easy loop should be enough.

<div id="R">
</div>

<script>
var createCircle = function(step,posX,posY,radius){
    var paper = Raphael("R",500,500);
    for(var i = 0; i < 360; i=i+step){        
        var currentRect = paper.rect(posX+radius,posY, 2,20);
        currentRect.attr({'fill':'#ffffff',stroke:0});
        currentRect.rotate(i,posX+radius,posY + radius);
    }
}
createCircle(3,50,50,94);
</script>

http://jsfiddle.net/mBKP4/2/