JSFiddle - React, Tailwind, and code Playground

Animated Skills Diagram with Raphaël

by Jennifer Perrin

HTML

<script src="http://jenniferperrin.com/jsfiddle/raphael.js"></script>
<div id="content">
    <div class="legend">
        <h1>Legend:</h1>
        <div class="skills">
            <ul>
                <li class="jq">JavaScript</li>
                <li class="css">CSS3</li>
                <li class="html">HTML5</li>
                <li class="php">PHP</li>
                <li class="sql">MySQL</li>
            </ul>
        </div>    
    </div>
    <div id="diagram"></div>
</div>

<div class="get">
    <div class="arc">
        <span class="text">JavaScript</span>
        <input type="hidden" class="percent" value="90" />
        <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>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);

html, body { margin:0; padding:0; }
    body {
        background:#f5f5f5;
        font-family: 'Dosis';
        font-size:12px;
        color:#333;
        line-height:18px;
    }

#content {
    position:absolute;
    top:50%;
    left:50%;
    margin:-340px 0 0 -450px;
    width:900px;
    height:600px;
}

.legend {
    float:left;
    width:250px;
    margin-top:140px;
}

#content h1 {
    font-family:'Dosis';
    text-shadow:3px 3px 0 #ddd;
    color:#193340;
    font-size:40px;
    margin-bottom:40px;
    text-align:right;
}

.skills {
    float:left;
    clear:both;
    width:100%;
}

.skills ul, .skills li {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
}

.skills li {
    float:right;
    clear:both;
    padding:0 15px;
    height:35px;
    line-height:35px;
    color:#fff;
    margin-bottom:1px;
    font-size:18px;
}

.skills .jq { background:#97BE0D; }
.skills .css { background:#D84F5F; }
.skills .html { background:#88B8E6; }
.skills .php { background:#BEDBE9; }
.skills .sql { background:#EDEBEE; }

#diagram {
    float:right;
    width:600px;
    height:600px;
}

.get { display:none; }

JavaScript

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),
            rad = 73,
            defaultText = 'Skills',
            speed = 300;
        
        r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#5a7c87' });
        
        var title = r.text(300, 300, defaultText).attr({
            font: '20px Dosis',
            fill: '#fff'
        }).toFront();
        
        r.customAttributes.arc = function(value, color, rad){
            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();
            
            rad += 30;    
            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.stop().animate({ opacity: 0 }, speed, '>', function(){
                    this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, speed, '<');
                });
            }).mouseout(function(){
               ...