Awwation update: Themes support

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(;

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.

One thought on “Awwation update: Themes support

Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s