Tea Infographics

Project Brief

While working on a browser-based SVG tool, we explored the potential of SVG in responsive design, animations and interaction. We wanted to build a website to showcase our findings on the future of graphics on the web. As I am an avid tea drinker with keen interest in infographics, I thought of illustrating interesting facts about tea for the website. I researched about tea from origin to consumption, from statistics to traditions and created a storyboard to demonstrate interesting SVG capabilities. The interactive website can be viewed at www.svgstories.com



SVG , Infographics , Story telling , Tea , Illustrations


Webpage illustrations to showcase the potential of SVG

Project Overview

SVG is optimal for web graphics today as it is lightweight, resolution independent and browser agnostic. It has good in-built support for shapes, Bezier curves, patterns, gradients, text etc. However, SVG is still treated as a static graphics to be embedded into a web page. Today, with the recent support for inline SVG in HTML5, the SVG DOM is directly accessible. You can now apply CSS animations and transitions on SVG elements and attributes. The goodness of Html5, CSS3, Javascript and the SMIL model along with SVG almost makes web graphics a limitless interactive environment. We tried exploring all these techniques along with experiments in declarative animation and scripting to enhance the interactive experience using SVG.

Concept Video

This video was created to communicate the interactions and animations that had to be coded into the site. We also used it as a teaser to gain momentum for our talks at international conferences like The Graphical Web and SXSW 2015.


The illustration style is simplistic with the use of vibrant colors. Every frame has at least one element that transitions or transforms to the next frame for continuity.

img04 img04 img04 img04

‘Tea Production’ is represented by the quantity of tea in the cup. ‘Tea Consumption’ is illustrated by the degree of tilt of the cup. ‘Preferred Temperatures’ is represented by the amount of steam.

img04 img04

If you hover over the benefits of tea, you will know the type of tea to drink.

img04 img04 img04 img04

The below website is best viewed on Chrome. It was designed in 2014 and optimized for the Chromium version 35.0.1882.0.