3D Animation in SVG

A couple of months ago, I wrote a short post about experimenting with creating 3D graphics with SVG. Well, I've been experimenting a bit further, with shading and a bit of animation. I decided to make a mobile after seeing the Google logo celebrating Alexander Calder's 113th Birthday, which I think was some sort of Canvas animation.

I should make it clear that I don't creating 3D animations with SVG is a particularly good idea, since SVG really isn't designed for three dimensions; I just wanted to see how far I could get. I'm still quite amazed that the above SVG is simply a few 2D paths drawn over and over again. The code I've written is not pretty and very hacky, but it works for this test case. I might be able to make things a bit easier by using matrix transformations, but I don't think it will help a great deal.

The hardest part was to get the SVG to display its elements in the correct order, e.g. so the triangle in front is drawn on top of the triangle behind. Because of the way SVG works, the only way to achieve this is to manipulate the DOM, as I described here. In fact, you need to clone an element, append it to the end of a node, and then delete the original.

function moveTriangleToBottom(n){	    
    var t1 = svgDoc.getElementById('triangle'+n);
    var t2 = t1.cloneNode(false);
    var parent = svgDoc.getElementById("triangles")


The edges are easier to deal with because only one is ever visible, so we can simple change the visibility of the other to 'hidden'.

animated_mobile.svg5.4 KB


Great job. I really appreciate your work. It is very helpfull. Keep it up.

Cool example to look as 3d animation in SVG. Thanks for your help

Post new comment

The content of this field is kept private and will not be shown publicly.