SVG, Animation, Blur, Firefox and an Ubuntu Advertisement
Back in 2010, I experimented in Autodesk 3ds max and created a promotional advertisement for Ubuntu. I rendered it with V-Ray and glued it up in Adobe Premiere. I picked Henry Mancini’s “It Had Better Be Tonight (Meglio Shamora)” as a soundtrack and published the ad on Vimeo on 4th July 2010.
It was a great learning experience with an awesome reward in the end — a version of this ad with a different soundtrack became part of the Ubuntu Free Culture Showcase and is, to this day distributed with each version of Ubuntu.
Ever since the ad became popular, I started receiving tons of emails and a lot of requests to create a boot-loader from it — unfortunately that never happened. There were some localization requests as well. Together with Stas Sușcov we even created and published a Romanian version of the ad.
But I never released the source files, as I wanted to recreate the ad in free and open source software. Blender was an option, though I quickly lost interest because I was overwhelmed by the things I needed to learn from scratch.
I never thought that a few years later I will be able to recreate this project with open Web technologies.
Accepting The Challenge
It is now 2014. HTML5 is more or less the norm and SVG is one of the next big things. I’m working as a Graphic and Web Designer for the past 8 years. I use HTML, CSS and JavaScript daily. SVG is what I want to learn next.
So, I thought… why not try and recreate the ad with HTML, CSS, JavaScript and SVG? I mean, how hard could it be?
The ad wasn’t complex at all and almost any part from it, could be represented with HTML and CSS. I could use JavaScript for the dynamic textual elements and any other scripting. The tricky part was the animation and obviously, the motion blur, but SVG had me surprised!
The W3C Recommendation for SVG 1.1 was on my “To Read” list for a long time and I could finally show it some love.
Scalable Vector Graphics
The SVG Working Group describes SVG as …
… a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.
SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (i.e., by embedding SVG animation elements in SVG content) or via scripting.
Basically, with SVG, you can draw through simple markup and your drawings will scale nicely on any canvas. SVG drawings are not pixel based and can be stretched — proportionally or non-proportionally — without becoming pixelated or blurred. Of course, there is much more to it, but I’m trying not to get into too much technical details here, as everything is well written out in the W3C Recommendation.
SVG gained a lot of popularity due to Responsive Design. People started creating fancy icon sets and all kinds of other vector graphics. But icon fonts are still much more popular today and that is probably because, SVG is not well supported by today’s modern browsers.
However, using SVG today is possible!
“How Fast Does Your PC Boot?” Revisited
I started by writing the markup for the elements I was planning to work with. I created a shaded background, several textual layers and imported the Ubuntu symbol, plus the Ubuntu logotype via SVG markup — basically copy-pasted parts of the code in “Ubuntu Circle of Friends (black, hex)” and “Ubuntu logo with no ® (black and orange, hex)” from Ubuntu Design.
By the way, the Ubuntu word and associated logos are registered trademarks of Canonical Limited. I hope Canonical won’t mind me using the Ubuntu logo, as they didn’t in 2010.
So, I decided to use Roboto for the textual elements, even though I used the Liberation Sans font in the original advertisement.
I included mp3 and ogg versions of the soundtrack, created with FL Studio.
<audio id=”soundtrack” preload=”auto” autoplay> <source src=”how-fast-does-your-pc-boot-ubuntu-soundtrack.mp3" type=”audio/mpeg”> <source src=”how-fast-does-your-pc-boot-ubuntu-soundtrack.ogg” type=”audio/ogg”> <!— Fallback for non supporting browsers → <p>Sorry, your browser does not support HTML audio.</p> </audio>
Once finished styling the elements, I wrote four simple CSS animations as @keyframes and spend some time experimenting with animation-delay and animation-duration to get the timings right. I’m using these CSS animations for showing and hiding the textual elements and the Ubuntu logotype.
@keyframes ubuntu-scene-fade-in{ 0%{ opacity: 0; } 100%{ opacity: 1; }
}@keyframes ubuntu-scene-fade-out{ 0%{ opacity: 1; } 100%{ opacity: 0; }
}@keyframes ubuntu-scene-hidden{ 0%{ opacity: 0; } 100%{ opacity: 0; }
}@keyframes ubuntu-scene-visible{ 0%{ opacity: 1; } 100%{ opacity: 1; }
}
In the original ad I’m showing a timer which counts from 00:00 to 00:10 to indicate that Ubuntu can boot in only 10 seconds. I recreated this timer with a bit of JavaScript.
jQuery(‘.counter-container’).ready(function() { // Get counter text value counterVal = jQuery(‘#counter’).text();
// Start counting after 2900ms setTimeout(countIt, 2900); });
function playSoundtrack() { // Trigger soundtrack play var soundtrack = jQuery(‘#soundtrack’); soundtrack.get(0).play(); }
function countIt() { // Increment counter every 1000ms countItInterval = setInterval(incrementIt, 1000); }
function incrementIt() {
// Increment counter counterVal++;
// Check if counter larger than 10 and stop if true if (counterVal >= 10) { clearInterval(countItInterval); }
// Add zero in front of single number values if (counterVal < 10) { counterVal = ‘0' + counterVal; }
// Print counter value in console console.log(counterVal);
// Refresh counter value jQuery(‘#counter’).text(counterVal); }
Now, all I had to do was animate the SVG drawings accordingly and discover some kind of a way to visualize motion blur.
Scripting SVG Animations
To animate the Ubuntu symbol, I used the animateTransform element.
The ‘animateTransform’ element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing.
I first wrote the rotation animation for the symbol.
<animateTransform attributeName=”transform” attributeType=”XML” calcMode=”spline” begin=”3.25s” type=”rotate” values =”0 142 142 ; 14400 142 142" keyTimes=”0 ; 1" keySplines=”0.4 0 0.4 1" dur=”10s” />
Then, I wrote its scaling animation.
<animateTransform attributeName=”transform” attributeType=”XML” additive=”sum” calcMode=”spline” values =”1 ; 0.65; 1" keyTimes=”0 ; 0.5 ; 1" keySplines=”0.4 0 0.5 1 ; 0.5 0 0.25 1" begin=”3.25s” type=”scale” dur=”10s” />
And additionally, because of how the SVG coordinate systems work, I wrote a translation animation as well.
<animateTransform attributeName=”transform” attributeType=”XML” calcMode=”spline” additive=”sum” begin=”3.25s” type=”translate” values =”0 0 ; 50 50 ; 0 0" keyTimes=”0 ; 0.5 ; 1" keySplines=”0.4 0 0.5 1 ; 0.5 0 0.25 1" dur=”10s” />
Bam! I had the Ubuntu symbol moving in space, rendered in real-time.
Now, what about the motion blur?!
Hello SVG Filter Effects!
SVG Filters are special effects which allow additional ways of styling SVG graphics, currently not well supported by many of the modern browsers. Anyway, you can do wonders with these simple SVG markup rules, if supported by the browser of your choice.
I generated the visualization of what seems to be motion blur through the feGaussianBlur filter effect. It is a filter primitive which performs a Gaussian blur on an input image and can be animated.
Here is how I defined the filter and its animation.
<filter id=”gaussianblur” x=”-100%” y=”-100%” width=”280%” height=”280%”> <feGaussianBlur in=”SourceGraphic” stdDeviation=”0"> <!—Blur animation→ <animate attributeType=”XML” attributeName=”stdDeviation” additive=”sum” calcMode=”spline” values =”0 ; 30; 0" keyTimes=”0 ; 0.5 ; 1" keySplines=”0.5 0 0.5 1 ; 0.5 0 0.35 1" begin=”3.25s” dur=”10s” /> </feGaussianBlur> </filter>
I specified one more Gaussian blur filter for the drop shadow effect and had it animated as well.
<filter id=”dropshadow” x=”-100%” y=”-100%” width=”280%” height=”280%”> <!— stdDeviation is how much to blur → <feGaussianBlur in=”SourceGraphic” stdDeviation=”20"> <!—Shadow animation→ <animate attributeType=”XML” attributeName=”stdDeviation” calcMode=”spline” additive=”sum” values =”0 ; 20; 0" keyTimes=”0 ; 0.5 ; 1" keySplines=”0.5 0 0.5 1 ; 0.5 0 0.35 1" begin=”3.25s” dur=”10s” /> </feGaussianBlur> </filter>
Of course the motion blur did not look the same as the one in the original ray-traced rendering, but it looked quite good, considering it was generated in real-time and defined through a few lines of SVG markup.
Now things moved and looked much, much better. With a bit more polishing and tweaks, the work was more or less done… in Firefox!
I could have probably added even more polish, to make the HTML version even more similar to the video ad, but had to live a little. ☺
Firefox, I Love You
While working on this project, I intentionally avoided checking how things looked in other browsers. Once I was satisfied with what I saw in Firefox 32 on Windows, I got pretty excited to see what other browsers had to offer. Unfortunately, the excitement was gone quickly, as I was not able to get to the final stage of the visualization in any other browser, except Firefox.
Chrome, Safari, Opera and Internet Explorer do not currently support SVG Filter Effects animations or at least, I wasn’t able to figure out how they are implemented and supported.
Internet Explorer 11 renders text, SVG drawings and animations really nicely and the performance is great, but supports only CSS animations. Chrome 37 has serious problems rendering transformed (scaled, skewed, rotated or repositioned) text and SVG drawings, as they appear blurred and that somehow degrades rendering performance. Safari 7 has problems rendering SVG Filter Effects alphas and masks.
Anyway, at least I didn’t have to worry how browsers presented the elements statically. Everything looked the same in every modern browser checked, though I had to use some vendor prefixed CSS rules for Safari.
So, no. I’m not disappointed. I am amazed that with just 30+ KB of code a browser is capable of rendering a high quality editable vector animation with special effects. It is insane how far open Web standards have reached since 2010.
Even though the specification for SVG is available since 1999 and it took humanity more than a decade to start supporting the technology, I believe that we’ll see much more SVG breakthroughs in the very near future. Especially because of the healthy competition between browser vendors.
There has never been a better time to start learning SVG!
The Devil Is In The Detail
Want to dig dipper into this project? Please, be my guest. I have all the assets hosted on GitHub.
