<div></div>

div{
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100px;
  height: 100px;
  background-color: crimson;
  cursor:pointer;
  }

let parts = [];
document.querySelector("div").onclick = (e) => {
  for (let y = 0; y < 16; y++) {
    const part = document.createElement("span");
    part.style = `
                    position: absolute;
                    width: 25px;
                    height: 25px;
                    background-color: blue;
                    left: 50%;
                    top: 50%;
                    translate: -50% -50%;
                    box-shadow: 0 0 0px 1px black inset;
                    `;
    parts.push(part);
    document.querySelector("div").append(part);
  }

  parts.forEach((p) =>
    p.animate(
      [{ transform: `translate(${rand(-200, 200)}px,${rand(-200, 200)}px)` }],
      {
        duration: 2000,
        easing: "ease",
        fill: "forwards"
      }
    )
  );
};
const rand = (min, max) => Math.floor(Math.random() * (max - min) + min);