JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div id="bubble"></div>

CSS

.debris {
    display: none;   
    position: absolute;
    overflow: hidden;
    width: 28px;
    height: 28px;
    background-color: #ff00ff;
    border-radius: 8px;
    color: #f00;
    font-size: 14px;
    opacity: 1.0;
}

#bubble {
    position:absolute;
    border: 1px solid #f00;
    width:100px;
    height:32px;
    border-radius: 8px;
    left:150px;
    top:150px;
    z-index: 9;
}

JavaScript

console.clear();

$("#bubble").on("click", function(e) {
    explosionEffect(e.pageX, e.pageY, 13);
});

function r2d(x){return x/(Math.PI/180)}
function d2r(x){return x*(Math.PI/180)}

function explosionEffect(start_x, start_y, particle_count) {
    var arr = [],
        angle = 0,
        particles = [],
        offset_x = 0,
        offset_y = 0,
        $body = $("body"),
        x,y,z;

    for (var i = 0; i < particle_count; i++) {
      rad = d2r(angle);

      x = Math.cos(rad)*(80+Math.random()*20);
      y = Math.sin(rad)*(80+Math.random()*20);

      arr.push([start_x + x, start_y + y]);

      z = $('<div class="debris" />');
      z.html('❤').
          css({
            left: start_x - offset_x,
            top: start_y - offset_x
          }).
        appendTo($body);

      particles.push(z);
      angle += 360/particle_count;
    }
    
    particles.forEach(function(v,i){
      var $v = $(v);
      $v.
          show().
          animate(
            {
                  top: arr[i][1], 
                  left: arr[i][0],
                  width: 4, 
                  height: 4, 
                  opacity: 0
            },
            600,
            function(){ $v.remove() }
        );
    });

}