Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

SVG: How to draw and animate vectors

The design team behind the ILTF project offers an inspiring creative insight into how the recognisable graphics were produced and animated

The design team behind the ILTF project offers an inspiring creative insight into how the recognisable graphics were produced and animated


Bold graphical styles

A key visual element of is the very distinctive style applied to the site’s graphics. Ranging from the logo, to the player sprites and indeed the simplified UI elements, each conform to a certain, consistent aesthetic throughout. These cute, cartoon-like assets adopt a crisp line-art style or ‘flat’ look that works alongside the typography and colours to achieve a bold look. Over the following steps we’ll dissect some of those elements, identifying the drawing and animation techniques.

Illustrator techniques

In terms of tools, Illustrator was used to draw both the I Love This Fame logo graphic and compose the various player sprites. So firstly, referencing an incomplete version of the logo as shown, an element such as the basket rim and net would be added on a new layer, using the Ellipse tool (L) to draw the basic shape and the Eyedropper tool (I) to colour-match before contouring black with Path>Offset Path. The net outline would then be traced using a guide graphic and 7pt pen tool, stroking to outline with Path>Outline. It’s then just a case of joining the two together and placing the whole element with the logo graphic against the remaining logo type.

Draw player sprites

The actual player illustrations can then be drawn in Illustrator using the same techniques to echo the same style. However, here each layer would be isolated so elements such as head, hair, body, legs and arms and so on could be individually edited for the various characters. So for instance a bald player could have a range of new haircuts applied easily, with recolouring or reshaping using the Direct Selection Tool (A).

Save as SVG

These illustrations can then be exported from Illustrator, in the case of ILTF, using Save As and choosing the SVG format. SVGs are vector-based, small in file size, and consistent across multiple screens – but the inherent usefulness within CSS-based animations makes them ideal here. These multiple player sprites are then absolutely positioned into the page.

Structure and motion

Using the opening page as an example, the first animated boy player is made up of six SVG images. These are grouped within HTML5’s <figure> tag, specifically for semantically defining a self-contained illustration. Each then has a CSS class attached to apply the @keyframes animations for adding motion. By independently using transforms such as translateY(), rotate() and translate3d() with just small increments, the subtle head bobs, sways and ball bounces are achieved.

001 <figure class="boy">     
002 <img src="img/boy_legs.svg" class="legs">     
003 <img src="img/boy_arm_left.svg" class="arm-left">
004 <img src="img/boy_arm_right.svg" class="arm-right">     
005 <img src="img/boy_body.svg" class="body">     
006 <img src="img/boy_head.svg" class="head">
007 <img src="img/boy_ball.svg" class="ball">     
008 </figure>