JSFiddle - React, Tailwind, and code Playground

by nickjbyrne

JavaScript

var r = Raphael(0, 0, 800, 800);

var a = r.circle(20, 50, 15);
var b = r.circle(20, 100, 15);
var c = r.circle(20, 150, 15);

var buttons = r.set(a, b, c);

buttons.attr({
    fill: "#ffff00",
    stroke: "#333",
    "stroke-dasharray": "- ",
    opacity: .8
});

var clone_handler = function() {
    var x = this.clone();
    x.drag(move, start, up);
    x.hover(hv_on, hv_off);
};

var start = function(x, y, event) {
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.animate({
        r: 20,
        opacity: .25
    }, 500, ">");
},
    move = function(dx, dy) {
        this.attr({
            cx: this.ox + dx,
            cy: this.oy + dy
        });
    },
    up = function() {
        this.animate({
            r: 15,
            opacity: .8
        }, 500, ">");
    };

var hv_on = function() {
    this.animate({
        r: 20,
        opacity: .25
    }, 500, ">");
},
    hv_off = function() {
        this.animate({
            r: 15,
            opacity: .8
        }, 500, ">");
    };

a.mousemove(clone_handler);
b.mousemove(clone_handler);
c.mousemove(clone_handler);