Há pouco mais de uma semana, como parte do concurso Telegram, tive que mergulhar no “mundo mágico” do svg, fórmulas matemáticas, otimização e animação. A tarefa da competição era criar um gráfico bastante simples sobre JS, mas algumas das nuances da tarefa e a ênfase no desempenho a tornaram interessante. Dado o desejo de criar algo com pretensão de vitória, era necessário mergulhar um pouco mais fundo do que a marca de limite usual para projetos típicos (e não muito) do mundo do desenvolvimento front-end.
Não deu certo com a conclusão do trabalho, mas desta vez não foi desperdiçado. A principal descoberta foi a capacidade de trabalhar totalmente com gráficos 3D em SVG! Criando modelos, girando em um eixo selecionado, animação de script e muito mais - tudo isso está disponível aqui e agora.
A coisa mais importante
Inicializando um elemento SVG como 3D:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" axisZ="true">
Rotação em um determinado eixo:
polyLine.rotateX(45); polyLine.rotateY(90);
Adicionando cenas e iniciando a animação:
polyLine.addAnimScene('rotateX', 45); polyLine.addAnimScene('rotateZ', 60); ... polyLine.runAnimScene(delay);
Demo
https://shtange.imtqy.com/svg-3d/ ( fontes )