Category : Css | Author : Chtiwi Malek | First posted : 2/6/2013 | Updated : 4/3/2013
Tags : svg, css3, html5, animations, drawing, shapes, graphics
Drawing and Animating Shapes (SVG & CSS3)

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.
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old, web & software full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Thanks
Thanks for the tutorial, I'm going to try it out today!
By Mike on 2/6/2013
Great tutorial
i've made many presentations with svg, but i didn't know that holes in the svg objects could be made. thanks alot.
By Joe on 2/6/2013
Flash is a dying technology
Impressive, flash is a dying technology, long live Html, CSS, SVG, Javascript ...
By Arnauld on 2/10/2013
Not working in IE9 (at least mine)
In my view, every html tech not working with IE should not worth time to learn from the end user point of view.
By Nan on 2/18/2013
yes IE9 doesn't support Css3 animations, transitions... but it works on IE10+. by Chtiwi Malek
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access
or
» Latest
» Random/Popular
© Codicode | Content and source © 2013