Here is my solution: Yin & Yang.xar.

If you are puzzled by the "square" Yin & Yang, that one needs to be Previewed in a browser.
A small bit of CSS turns the squares into the required circles.

Why?

Two reasons.
First, it removes jaggies that bitmaps produce. Scale the browser to 500% or higher and compare top with bottom.
Second, only one image is generated and that is tiny. Download and rendering speeds are therefore quicker. I could have used code to generate the abrupt linear gradient but its coding is almost as bit as the small bitmap I chose instead.

Acorn