Create something like this with CSS3?

http://raphaeljs.com/polar-clo开发者_StackOverflow社区ck.html

I'd like to create this without using SVC or Canvas. Can anyone point me in the direction of examples doing something similar with css?

Thanks!

Well, SVG certainly seems to be the correct solution to this (or canvas, but I would prefer SVG). And the Raphael script will even work in old versions of IE as it switches to VML in IE6/7/8, so if you're trying to avoid SVG/Canvas because of that then you don't need to worry.

But you're asking how to do it without them, so I'll see what I can do...

There are a number of people who have demonstrated drawing some quite complex shapes using pure CSS. See http://css-tricks.com/examples/ShapesOfCSS/ for example.

With pure CSS/HTML, the only realistic way to draw curves is using the border-radius style. A circle as per the example in the question could be achieved using a square element with border-radius, and a thick border.

Drawing concentric circles as per the question would involve numerous elements layered on top of each other, each styled similarly, but at different sizes.

Now the tricky bit. To turn them from circles into arcs is going to be harder. The only sensible way I can think of to do it would be to layer some more elements on top of the circles coloured the same as the background, to obscure part of the circle. We would need to use CSS transform to rotate them so that the angle of the cut-off was correct.

So it could be done.

Animating it (certainly as nicely as in the example) would be another order of magnitude more difficult, and I wouldn't want to even start thinking about it. Just give me the SVN any day.