Animate SVG in 3D

The SVG format is now widely supported, easy to create with an editor like Inkscape, and being increasingly used, for scalable icons for example.

It can be added 3D effects with library svg3d on Github.

Some examples :

No code needed, the idea is to add the 3rd coordinate or the 3D transformations inside SVG declaration.

For a <path> tag, the 3rd coordinate is declared after each 2D point, with a 3rd number which is the value of z :

<path d="M200,100"/>

becomes

<path d="M200,100,100"/>

in order to start the path with point x=200, y=200, z=100.

Categories: 3D, HTML, Javascript, SVG

Leave a Reply

Your email address will not be published. Required fields are marked *