JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="lightbulb-fx">
    <div id="lightbulb-emitter">
        <img src="http://i.imgur.com/kNvanMw.png" />
    </div>
</div>

CSS

#lightbulb-fx{
    text-align: center;
}

#lightbulb-fx > div{
    position: relative;
    max-width: 100%;
    display: inline-block;
}
#lightbulb-fx > div > span{
    display: block;
    position: absolute;
    background: black;
    width: 2px;
    height: 2px;
    transition: top 750ms, left 750ms;
}
#lightbulb-fx > div > img{
    max-width: 100%;
    display: block;
    margin: 10vmin;
}

#lightbulb-fx,
#lightbulb-fx *{
    box-sizing: border-box;
}

JavaScript

var lfx = {
    emitterCount: 20,
    emitterStart: {
        x: 50,
        y: 37
    },
    elem: document.getElementById('lightbulb-emitter'),
    init: function(){
        var pc = document.createElement('span');
        pc.setAttribute('style', 'top: ' + lfx.emitterStart.y + '%; left: ' + lfx.emitterStart.x + '%');
        lfx.elem.appendChild(pc);
        
        lfx.buildPoints();
    },
    buildPoints: function(){
        var gap = 180 / lfx.emitterCount;
        for(var i = 0; i < lfx.emitterCount; i++){
            var pc = document.createElement('span');
            console.log(3.5 / (Math.PI * i));
            pc.setAttribute('style', 'top: ' + (lfx.emitterStart.y + (3.5 / (Math.PI * i))) + '%; left: ' + (lfx.emitterStart.x) + '%');
            lfx.elem.appendChild(pc);
        }
    },
    runAnim: function(){
        
    }
}

lfx.init();