This animation was created using a combination of Inkscape's XML Editor and some manual adjustments to the code. This number animation was created in SMIL.
SMIL was rumoured to be disappearing, but contrary to popular belief, it is in a stronger position than ever, with all major desktop and mobile browsers supporting, including Chrome, Safari, Firefox and Edge.
It's really nice man. I want to learn this can you please specify me a complete path how to learn it and from where to learn this completely and easily. It will be a great help for me. Regards, Bahria
Hello @bahriaplus, thank you. SMIL is not necessarily hard to learn, but the above took a fair bit of reading, some practise and some maths. There isn't exactly a tutorial to cover what is needed to create this animation. From memory, it is necessary for each object to share the same number of nodes and for each matching node to use the same type of Bézier curve. You will probably need to convert them manually after creating your shapes and matching the number of nodes.
You will need to learn both the SVG co-ordinate system and the difference between quadratic Bézier curves and cubic Bézier curves.
Start with something more simple such as morphing a square to a triangle and in reverse.
Few things worth doing can be done easily but challenges which push you to your limits are often rewarding when you succeed.
Share Finished Artwork Number animation
Inkscape.org
This animation was created using a combination of Inkscape's XML Editor and some manual adjustments to the code. This number animation was created in SMIL.
SMIL was rumoured to be disappearing, but contrary to popular belief, it is in a stronger position than ever, with all major desktop and mobile browsers supporting, including Chrome, Safari, Firefox and Edge.
Hello,
Well done ! It's exciting, and it seems encouraging !
I also tried my way( Inkscape 0.92; Blender 2.79) It doesn't that yet ...
Someday Inkscape will support SMIL. Hope <3
@ravanie Thank you. Yes, hope so.
It's really nice man. I want to learn this can you please specify me a complete path how to learn it and from where to learn this completely and easily. It will be a great help for me. Regards, Bahria
Hello @bahriaplus, thank you. SMIL is not necessarily hard to learn, but the above took a fair bit of reading, some practise and some maths. There isn't exactly a tutorial to cover what is needed to create this animation. From memory, it is necessary for each object to share the same number of nodes and for each matching node to use the same type of Bézier curve. You will probably need to convert them manually after creating your shapes and matching the number of nodes.
You will need to learn both the SVG co-ordinate system and the difference between quadratic Bézier curves and cubic Bézier curves.
Start with something more simple such as morphing a square to a triangle and in reverse.
Few things worth doing can be done easily but challenges which push you to your limits are often rewarding when you succeed.
You may want to start here:
https://css-tricks.com/guide-svg-animations-smil/
...then do a little research into the co-ordinate system:
https://www.sarasoueidan.com/blog/svg-transformations/
If you want to take a look at the code behind my number shape morphing animation above, here is the codepen: https://codepen.io/shytiger/pen/dyYaKOY
Start simply and, if you like, post your work in this thread, so I can take a look.
I hope that helps!