Hace poco más de una semana, como parte del concurso Telegram, tuve que sumergirme en el "mundo mágico" de svg, fórmulas matemáticas, optimización y animación. La tarea de la competencia era crear un gráfico bastante simple sobre JS, pero algunos de los matices de la tarea y el énfasis en el rendimiento lo hicieron interesante. Dado el deseo de crear algo con un reclamo de victoria, fue necesario sumergirse un poco más profundo que el umbral habitual para proyectos típicos (y no tan) del mundo del desarrollo front-end.
No funcionó con la finalización del trabajo, pero esta vez no se desperdició. ¡El descubrimiento principal fue la capacidad de trabajar completamente con gráficos 3D en SVG! Creación de modelos, rotación en un eje seleccionado, animación de guiones y mucho más: todo esto está disponible aquí y ahora.
Lo mas importante
Inicializar un elemento SVG como 3D:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" axisZ="true">
Rotación en un eje dado:
polyLine.rotateX(45); polyLine.rotateY(90);
Agregar escenas y comenzar la animación:
polyLine.addAnimScene('rotateX', 45); polyLine.addAnimScene('rotateZ', 60); ... polyLine.runAnimScene(delay);
Demo
https://shtange.imtqy.com/svg-3d/ ( Fuentes )