# Animated Skills Diagram with Raphaël

In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over […]

From our sponsor: Get started on your Squarespace website with a free trial

In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs. ### The Markup

The HTML structure is going to consist of a main container with the class ‘get’. This container stores all data that we need to draw the arcs. Then we create a new div element with the id ‘diagram’ which will be the container for the arcs:

```<div id="diagram"></div>
<div class="get">
<div class="arc">
<span class="text">jQuery</span>
<input type="hidden" class="percent" value="95" />
<input type="hidden" class="color" value="#97BE0D" />
</div>
<div class="arc">

<span class="text">CSS3</span>
<input type="hidden" class="percent" value="90" />
<input type="hidden" class="color" value="#D84F5F" />
</div>
<div class="arc">
<span class="text">HTML5</span>
<input type="hidden" class="percent" value="80" />
<input type="hidden" class="color" value="#88B8E6" />

</div>
<div class="arc">
<span class="text">PHP</span>
<input type="hidden" class="percent" value="53" />
<input type="hidden" class="color" value="#BEDBE9" />
</div>
<div class="arc">
<span class="text">MySQL</span>
<input type="hidden" class="percent" value="45" />
<input type="hidden" class="color" value="#EDEBEE" />
</div>
</div>```

### The CSS

In the CSS we will only do two things: hide the elements with the class ‘get’ and set the width and height of the div with the id ‘diagram’:

```.get {
display:none;
}

#diagram {
float:left;
width:600px;
height:600px;
}```

### The JavaScript

The main idea is to first create a new Raphael object (variable ‘r’) and draw our first circle with a radius that we specify in ‘rad’.
Then we create a new circle in the Raphael object. We center the circle (x: 300px and y: 300px) and we add some text to it.

```var o = {
init: function(){
this.diagram();
},
random: function(l, u){
return Math.floor((Math.random()*(u-l+1))+l);
},
diagram: function(){
var r = Raphael('diagram', 600, 600),

r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

var title = r.text(300, 300, 'Skills').attr({
font: '20px Arial',
fill: '#fff'
}).toFront();

}
}```

Now, let’s go one step further.
We’ll extend the Raphael object with some custom attributes:

• alpha – angle of the arc
• random – random number from the specified range
• sx, sy – start drawing from this point
• x, y – end drawing at this point
• path
```var o = {
init: function(){
this.diagram();
},
random: function(l, u){
return Math.floor((Math.random()*(u-l+1))+l);
},
diagram: function(){
var r = Raphael('diagram', 600, 600),

r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

var title = r.text(300, 300, 'Skills').attr({
font: '20px Arial',
fill: '#fff'
}).toFront();

var v = 3.6*value,
alpha = v == 360 ? 359.99 : v,
random = o.random(91, 240),
a = (random-alpha) * Math.PI/180,
b = random * Math.PI/180,
sx = 300 + rad * Math.cos(b),
sy = 300 - rad * Math.sin(b),
x = 300 + rad * Math.cos(a),
y = 300 - rad * Math.sin(a),
path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
return { path: path, stroke: color }
}

\$('.get').find('.arc').each(function(i){
var t = \$(this),
color = t.find('.color').val(),
value = t.find('.percent').val(),
text = t.find('.text').text();

var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });

z.mouseover(function(){
this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
if(Raphael.type != 'VML') //solves IE problem
this.toFront();
title.animate({ opacity: 0 }, 500, '>', function(){
this.attr({ text: text + 'n' + value + '%' }).animate({ opacity: 1 }, 500, '<');
});
}).mouseout(function(){
this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');
});
});
}
}```

Then we’ll retrieve all the data needed, such as the percentage value, the color of the arc and the text. We increase the radius value for each arc and finally create a new arc path.
In the last step we are adding some animations on hover. When the mouse will be over the arc the title (which is placed in the main circle) is changing. Also, we’ll make the arc a little bit bigger.

### Conclusion

In today’s tutorial you’ve learned some first steps on how to use Raphaël. It is a powerful library and you can do a lot of great stuff with it. Visit the Raphaël website for more examples. ### Marcin Dziewulski

Marcin is an experienced and creative web developer from Poland. He loves putting new ideas into practice and is addicted to jQuery and CSS. Read his blog about web development here: http://www.jscraft.net.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

### CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

## Feedback46

1. Christopher Grafikkarte

I love Raphael. And nice tutorial, already implemented at my site! 🙂

2. Drew

Love this effect. Went through the trouble of figuring out how to add more layers, style the graph, but when I tried to implement it into my live site I think I am getting some conflicts between rafael and mootools 🙁

Oh well!

Thanks for posting!

3. Xaver

Under what license is the (demo) code? Could I simply use the code?

4. melanie

very creative and inventive!

5. rajkamal

very nice code drop.
Like to see some code drops, which can show viewBox in action.

6. Marcell Grafikkarte

I love Raphael. And nice tutorial, already implemented at my site! 🙂 Greetz, Marcell