JSFiddle - React, Tailwind, and code Playground

by considerphlebas

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="holder"></div>

JavaScript

var rsr = Raphael("holder", '1160', '1400');

/* in the previous fiddle this part was not commented out
rsr.text(220, 50, 'Title').attr({'font-size': 32, 'text-anchor': 'middle'});
*/

var cir = []; // an array of circles
var xco = [206, 144.9, 317.4, 317.5]; // x coordinates of circle centers
var yco = [167.7, 231.8, 191.4, 256.8]; // y coordinates of circle centers
var rd = [25.5, 46, 34, 18.5]; // radii of circles
var circcolr = ['#939dac', '#000000', '#ecea5a', '#0da9f2']; // fill colors of circles
for (var i = 0; i < 4; i++) { // loop to draw circles
    cir[i] = rsr.circle(xco[i], yco[i], rd[i]);
    cir[i].attr({
        fill: circcolr[i],
            'fill-opacity': 1,
        stroke: 'none'
    });
}

for (var i in cir) {
    (function (st) {
        console.log(st.id);
        st.node.onmouseover = function () {
            st.animate({
                r: rd[st.id] * 1.2
            }, 200);
        };
        st.node.onmouseout = function () {
            st.animate({
                r: rd[st.id]
            }, 100);
        };
    })(cir[i]);
}