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 the perspective transform just seems to work in Gecko browsers (That's Firefox and Firefox rewrites such as Waterfox, Sea Monkey and Tor). 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.
Alternatively you can view it as a movie, but the time sequences on the SVG all run at different speeds with a couple of prime numbers in the animation code, so it keeps changing infinitely, whereas the movie only runs for a set length of time.
I think I can get it to work on Webkit browsers (Chrome, Safari, Opera, Edge etc., but I'm not there yet!
GET FIREFOX
HOMEPAGE
