I always thought fractals were a great source of eye candy. I've been meaning to write something that plots a fractal using SVG for some time now, but I actually got started from this old
post on VML fractals. I rewrote the code at first to use SVG, then I started reworking and optimizing to get something that runs at least decently in Firefox. It wasn't too hard to do, but I had a hard time getting the CPU usage down to something reasonable. With Internet Explorer and Adobe SVG Viewer 6, it ran very smoothly and there was no noticeable CPU usage increase. In Firefox 1.5, the CPU on
my notebook was maxed out. With Opera 9 Beta on the same computer the CPU was maxed and the browser gets a little unresponsive.
The fractal is visualized by plotting a bunch of points that are created by its generator function. The points are plotted by Javascript code that adds
use elements to the SVG DOM. It didn't seem to make much difference if the content of the
use was a simple circle, one with transparency or one with a gradient fill (I left my test cases in the SVG file so you can see for yourself). One optimization I made was to create groups of 100 points, then add the entire group (in a g element) at once, instead of adding elements to the DOM every time a point is calculated. This helped, but the optimization that made the biggest difference is a bounds check that doesn't add points which are outside the bounds of the image (set to 800x800 for now). Even this didn't do fix it completely. The problem was that with the bounds check and the grouping, I could now add empty groups. Adding empty groups would still cause performance problems on Opera and Firefox.
Give it a try and see how it looks for you. If you don't see many dots, refresh the page and you'll see another. The formula is seeded with random numbers on each page load. After a few refreshes you can find a nice one with lots of points in the viewport. Those ones with lots of points still tend to suck up CPU, but they are nice to look at.
Click here for the SVG Fractal demo.