Second release of #svg2css and Using it to build a Donkey Kong stage

Wait, What is svg2css?

Few weeks ago I created a project called #svg2css. What it does is that it lets a user create complex css3 animations with simple SVG path knowledge. A user needs to provide the web-app with SVG path info and in return it will generate a keyframe for the user. This is pretty helpful when it comes to complex css3 animations because human minds cannot create these complex keyframe information without hours and hours of manual computation. To know more about it, feel free to checkout out this blog about #svg2css.

You’ve piquid my interest, Sir. Where is this #svg2css Web App?

You can visit the webapp on the site It is an open source project built using PolymerJS. You can find the source code of #svg2css on Github

Woah!! But whats up with the 2nd version?

The first version of the app could help a user create a new project, build complex css3 animations and save it to gist. After all that is why this project was built initially. But when people decided to build something cool and were not able to show the output to other people without pasting the files to codepen or jsfiddle, it was time to get rid of this extra step.

The second version of #svg2css lets the user save the SVG information which was created during the project as well as lets the user load a project from gist directly into #svg2css with the help of a simple link. Now users can simply pass around their project link and open it in a browser to open the project. Please refer this tutorial link in order to understand how to generate the sharable link.

So wait, does that mean that you actually created a Donkey Kong stage demo using #svg2css ?

Oh hell yeah!!! This is a screenshot of the donkey kong stage project. The animation is applied to the drum that moves from the top to bottom. and left to right.


But if you want to see a working demo, you can go to this link. Feel free to fork the project and or see the generated source code from the webapp on this gist

Interesting!! Do you have anything planned for the future releases?

Yes, I do have a bunch of ideas that I would like to implement in the future releases. I usually keep a track of these things under the issues section of this project. If you have any ideas that could help improve this web app or if you find any bug, feel free to file them here.

comments powered by Disqus