Moving on from the original Elliptical Spirals I found that I could get the CSS perspective transform to work and. as you can see from the images above it does have a much better dynamic.
However I could only do it by nesting the SVG inside another couple of SVGs and applying the perspective transform to them. In turn they were nested inside a group tag which I used to position the ellipse inside the parent image.
Unfortunately the perspective transform doesn't work for SVGs in Safari, so now it's only working in Firefox and reasonably up-to-date Gecko browsers.
When I put the final SVG into this page using the image tag (HTML) I found that the perspective transform was horribly pixelated, so I had to find a work round for that too. However you can hardcode SVGs into HTML pages, so that's what I did. It means the page has over four and a half thousand lines of code, but what the heck! It works!
OK, so it just seems to work in Gecko browsers (even SeaMonkey, which isn't always as up-to-date as Firefox). If you haven't got Firefox you can download it from the link as the animation will look at it's very best that way. Also, the fullscreen command on this one only works in Firefox and Safari.
Alternatively you can view it as a movie, but the time sequences on the SVG all run at different speeds, so the animation keeps changing infinitely, whereas the movie only runs for a set length of time.
GET FIREFOX
HOMEPAGE
