JSFiddle - React, Tailwind, and code Playground

by peteorpeter

HTML

<div id="wand" />

CSS

div {
    width:960px;
    height:200px; 
    border:1px solid #999
}

JavaScript

// MIGRATED THIS TO DROPBOX!!!!

var r = Raphael("wand");


// Draw wand
var wand = r.set();

var handle = r.rect(80, 80, 8, 90);
handle.attr({
    fill: "#333",
    stroke: "#000"
});

var tip = r.rect(80, 80, 8, 30);
tip.attr({
    fill: "#fff",
    stroke: "none"
});

wand.push(handle, tip);

var particle = r.circle(0, 0, 0);

var radiate = function() {

    var p = particle.clone();

    //var x = wand.attr("x") + wand.attr("width") / 2;
    //var y = wand.attr("y");
    var x = 80;
    var y = 80;
    var r = 3 + (3 * Math.random());

    p.attr({
        "cx": x,
        "cy": y,
        "r": r,
        "fill": "#aa0",
        "stroke": "#ff0"
    });

    var newX = x + 100 + 300 * Math.random();
    var newY = y - 100 + 200 * Math.random();
    var newR = 3 + 3 * Math.random();
    var dur = 800 + 500 * Math.random();

    p.animate({
        "cx": newX,
        "cy": newY,
        "r": newR,
        "opacity": .4
    }, dur, ">", function() {
        this.remove();
    });

    var delay = Math.random() * 200;
    var int = window.setTimeout(radiate, delay);
};

var wiggleWand = function() {

    var newX = wand.attr("x") - 25 + 50 * Math.random();
    var newY = wand.attr("y") - 5 + 10 * Math.random();
    var newRo = -10 + (Math.random() * 60);
    var dur = 1000 + 2000 * Math.random();

    wand.animate({
        "x": newX,
        "y": newy
        //,
        //"rotation": newRo
    }, dur, "< >", function() {
        wiggleWand();
    });
};

wiggleWand();
radiate();