JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<div id="quest"></div>

CSS

#quest{
    width:1000px;
    height:500px;
    background:#aaa;
}

JavaScript

var can = Raphael(('quest'), 1000, 500);

var cir = can.circle(500, 250, 0).attr({
    stroke: '#fff',
    'stroke-width': 0
});



var rec = can.rect(230, 120, 100, 100, 35).attr({
    fill: '#000',
    stroke: 'none',
    'fill-opacity': 0.5
}).hide().toBack();

var rec2 = can.rect(230, 270, 100, 100, 35).attr({
    fill: '#000',
    stroke: 'none',
    'fill-opacity': 0.5
}).hide().toBack();

var rec3 = can.rect(680, 120, 100, 100, 35).attr({
    fill: '#000',
    stroke: 'none',
    'fill-opacity': 0.5
}).hide().toBack();

var rec4 = can.rect(680, 270, 100, 100, 35).attr({
    fill: '#000',
    stroke: 'none',
    'fill-opacity': 0.5
}).hide().toBack();


var mid = can.circle(500, 250, 0).attr({
    fill: '#fff',
    stroke: 'none'
});

var t = can.text(500, 250, "10").attr({
    fill: '#aaa',
    'font-weight': 'bold',
    'font-size': 58
}).toFront();

var num = 10;

function minus() {
    if (num > 0) {
        cir.animate({
            "50%": {
                r: 85,
                'stroke-width': 5,
                easing: 'elastic'
            },
            "100%": {
                r: 80,
                easing: '<'
            }
        }, 1000);
        t.remove();
        t = can.text(500, 250, --num).attr({
            fill: '#aaa',
            'font-weight': 'bold',
            'font-size': 58
        }).toFront();
    }
    else {
        clearInterval(time);
        num = 10;
    }
}

var st = can.set();
st.push(cir, mid, rec, rec2, rec3, rec4);


var screen = document.getElementById('quest');


screen.onmouseover = function() {
    appear();
}

screen.onmouseout = function() {
    disappear();
}

var time;

function appear() {
    cir.animate({
        r: 80,
        'stroke-width': 5
    }, 800, 'backOut');
    mid.animate({
        r: 70
    }, 600, function() {
        time = setInterval(minus, 1000);
        pop();
    });
}

function pop() {
    rec.show().animate({
        scale: "4,1"
    }, 500, 'backIn');
    setTimeout(function() {
...