SVG 3D: Create, Rotate, and Animate


    A little more than a week ago, as part of the Telegram contest, I had to plunge into the “magical world” of svg, mathematical formulas, optimization and animation. The competition task was to create a fairly simple chart on JS, but some of the nuances of the task and the emphasis on performance made it interesting. Given the desire to create something with a claim to victory, it was necessary to dive a little deeper than the usual threshold mark for typical (and not so) projects from the world of front-end development.


    It did not work out with the completion of the work, but this time was not wasted. The main discovery was the ability to fully work with 3D graphics in SVG! Creating models, rotating along a selected axis, animations according to a scenario, and much more - all this is available here and now.


    The most important


    Initializing an SVG element as 3D:


    <svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 200 200"axisZ="true">

    Rotation on a given axis:


    polyLine.rotateX(45);
    polyLine.rotateY(90);

    Adding scenes and starting the animation:


    polyLine.addAnimScene('rotateX', 45);
    polyLine.addAnimScene('rotateZ', 60);
    ...
    polyLine.runAnimScene(delay);

    Demo


    https://shtange.github.io/svg-3d/ ( Sources )


    Also popular now: