javascript - create fluid (scaling) concentric arcs using css, canvas, or svg -

i trying create graph this:

http://bl.ocks.org/cmdoptesc/6228457

or this

http://raphaeljs.com/polar-clock.html

but want able scale (preferably without javascript) according browser width. love able css only, , if not css, preferably without library raphael or d3 (though i'll take can get). know how accomplish in way scales down / up?

update

i made js fiddle - graph want:

http://jsfiddle.net/q9hb5/

but need resize. using raphael, , read svg resizing here:

http://bertanguven.com/?tag=raphael-js

and here:

http://www.justinmccandless.com/blog/making+sense+of+svg+viewbox%27s+madness

but don't want have resize js - i'd able svg properties such viewbox , preserveaspectratio, still haven't seen example accomplishes this.

any ideas?

since don't want use javascript libraries, assume creating svg image ahead of time and/or on server, , transmitting static svg code user. canvas images, in contrast, made javascript.

(if want dynamically create graph javascript, not use library, hard part drawing graph, not getting resize! @lars kotthoff notes, javascript easy find out size of window , scale accordingly.)

to make svg scale , down, need include viewbox attribute on svg element, , scale automatically. warning, though, sizing image dynamically while maintaining aspect ratio can bit frustrating. preserveaspectratio attribute prevents distortion, leaving empty space, not scaling down. in firefox, using height:auto; cause svg height scale down match width , viewbox aspect ratio, not in webkit browsers.

example here:
http://fiddle.jshell.net/9dsbl/

a indirect solution + set svg height negligible (but not zero) amount, such 1px; + set overflow:visible; on svg; + use slice option preserveaspectratio, image scales larger dimension of height or width; + hard-code bottom padding style on svg element matches aspect ratio of viewbox; + wrap entire svg in <div> style overflow:hidden;.

example here:
http://fiddle.jshell.net/9dsbl/1/