Drawing and Animating Shapes (SVG & CSS3)

This tutorial is an introduction to SVG and its potential, We will explore how to draw basic shapes, apply masks and perform animations via CSS3.

What is SVG ?

SVG stands for Scalable Vector Graphics, It's a powerful XML/Text based language that defines two-dimensional vector graphics, shapes, images, effects, embedded raster graphics and text.

SVG is an open standard and royalty-free graphics format. It has been first introduced in 1998 and is now developed and maintained by the W3C SVG Working Group.

SVG Potential and impact

SVG is a very powerful tool, graphics are resolution independent (can be scaled without losing quality), it integrates perfectly with other web technologies like Javascript, HTML5, CSS3... And is widely supported by modern web browsers.

Since 2010, Google is indexing SVG content, which means that graphics and text drawn via SVG will show up in google search results.

Exemple 1 :

In this first example we will animate three colored rings, when mouse hovered the animation stops. The rings are obtained by drawing three empty/transparent circles with a 5px stroke, the SVG HTML element has a class name "mysvg" and will be rotated indefinitely by applying a CSS3 animation, the rotation origin is the center of the SVG graphic canvas "50% 50%".

Html code :

<svg class="mysvg" width="98px" height="84px" version="1.1">
    <circle fill="none" cx="70" cy="30" r="25" stroke="#825" stroke-width="5"/>
    <circle fill="none" cx="50" cy="55" r="25" stroke="#492" stroke-width="5"/>
    <circle fill="none" cx="30" cy="30" r="25" stroke="#246" stroke-width="5"/>
</svg>

Css :

.mysvg
{
    animation:r1 5s linear infinite;
}
.mysvg:hover
{
    animation-play-state:paused;
}
@keyframes r1 {
    100% { transform: rotate(-360deg); }
}

Exemple 2 :

To obtain this cool effect I placed 2 SVG objects on top of each other using absolute positioning and z-index, the bottom one (with the class name 'c2') is composed of three black circles spinning slowly, the upper SVG is a white rectangle with three holes (circles) in it, spinning in the opposite direction. The animation will freeze when hovered.

Html code :

<svg class="c1" width="150" height="150" version="1.1">
    <mask id="msk1">
        <rect width="150" height="150" fill="#fff"/>  
        <circle fill="#000" cx="50" cy="50" r="18" />
        <circle fill="#000" cx="100" cy="50" r="18" />
        <circle fill="#000" cx="75" cy="93" r="18" />
    </mask>
    <rect width="150" height="150" mask="url(#msk1)" fill="#fff"/>  
</svg>

<svg class="c2" width="102" height="100" version="1.1">
    <circle fill="#111" cx="25" cy="25" r="18" />
    <circle fill="#111" cx="76" cy="25" r="18" />
    <circle fill="#111" cx="50" cy="70" r="18" />
</svg>

Css :

.c1
{
    position : absolute;
    left:0px;
    top:0px;
    animation:r1 24s linear infinite;
    z-index:20;
}
.c1:hover, .c1:hover + .c2
{
    animation-play-state:paused;
}
@keyframes r1 {
    100% { transform: rotate(-360deg); }
}
.c2
{
    position : absolute;
    left:20px;
    top:20px;
    animation:r2 25s linear infinite;
    z-index:10;
}
@keyframes r2 {
    100% { transform: rotate(360deg); }
}

SVG is a powerful tool and can be very useful for developing web based games, charts, loading spinners ...

While doing these experiments, I've noticed that animating SVG graphics and objects is much smoother than animating usual Html/CSS3 elements, and even JavaScript based animations.

Feel free to share and comment, I'd love to hear your thought and ideas about this.