I had been wanting to work on an svg animation for a very long time. Finally managed to create this simple animation. There’s a lot more to work on, until then here’s a quick preview: http://shailiza.com/animation/
This was inspired by the awesome animation of Adam Coulombe.
You can also access my source files at this GitHub account: https://github.com/shailiza/svg-animation
My process involved:
- Drawing in Illustrator – grouping each object appropriately.
- Further edited svg file.
- Added CSS, JavaScript. Majority of my time was spent in Illustrator and CSS.
- Followed by endless debugging.
Adam has done a great job explaining the process. I recommend you to go through his post.
Note: This only works when run from the HTTP protocol for security reasons. If you are having issues getting the SVG to load, be sure you are testing from a web server or running on localhost.
Data Source: cbs.gov.np. National Census of Manufacturing Establishments of Nepal 2011/2012, Central Bureau of Statistics, Government of Nepal.