Last week, I blogged about how I wrote the first iteration of Awwation, an HTML5 Prezi clone. Somehow the blog post surfaced onto the front pages of Slashdot, and /r/programming for a couple of days, and the project got a decent following on Github (it was a trending repo that day!).

This prompted me to polish the code a bit to make it presentable to potential contributors, and now the app is in a somewhat usable state.

The first iteration was rather bland, so I thought it would be a good idea to have presentation themes like Prezi does. As it turns out, this was easy – SVG can be styled using CSS.

So here’s a sample CSS theme for Awwation:

@import url(http://fonts.googleapis.com/css?family=Berkshire+Swash);

text {
    font-family: 'Berkshire Swash', cursive;
    text-shadow: 0px 0px 8px rgba(150, 150, 150, 1);
}

rect {
    stroke: #AEAEFF;
}

ellipse {
    stroke: #FF0000;
}

That’s it, really.

And here’s a new ‘Themes’ menu, with the above theme in action:

Themes menu. Selecting a different theme instantly changes all elements in the document to the new style.

What next? A theme creator tool would be a good idea. I’ve opened an issue for that. Contributions are welcome.