I challenge you to create a beautiful CSS3/HTML5 infographic :) See at the end of the article for more infos.

Why you should build your infographics in HTML5 and CSS3.

I see a lot of infographics around here, and most of them could be built only with web technologies (HTML5 + CSS3 + SVG).

src: 1 2 3 4 5;

Most of the infographics we see are beautiful, but sooooo static. You can make them much more alive if you use the web technologies.

Interactive content

You can change the style/content of an element if the user interact with it: :hover effects, fold/unfold on click, buttons to decide what to draw and select options (select a country, choose how to sort, ...), etc.

Live data

With an image, you're just showing a "snapshot" of your data at a certain time. The web allows you to fetch data. Your infographic could look completely different depending on when it is viewed. Build your graph with SVG or Canvas (here is an awesome library to do that: g.raphaeljs.com/) in real-time.


Make it move! With SVG SMIL, CSS Transitions, Canvas (see ProcessingJS), CSS Animations, you can build beautiful animations. You can even embed a video!

Make it sexy

Well, it's obvious, your infographic must be beautiful. With CSS3, you have infinite ways to make things beautiful: gradients, font-faces, multiple background, transforms, SVG background, ...

Side effects

Want to give it a try?

Here is a random list of free data sets. Take a look, build something interactive/live/animated/sexy in CSS3/HTML5/SVG, share it here. I'll publish the most interesting ones on the Mozilla Hacks blog :) (probably in June).

29 Apr 2011 / tweet this / @paulrouget / show comments