body {
  background: #111;
  overflow: hidden;
  background: url(https://wallpapercave.com/wp/wp2763763.gif);
  z-index:-9999;
  width:50%;
  zoom:1.1;
}

canvas {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

iframe {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

const $ = {};

$.Particle = function (opt) {
  this.radius = 7;
  this.x = opt.x;
  this.y = opt.y;
  this.angle = opt.angle;
  this.speed = opt.speed;
  this.accel = opt.accel;
  this.decay = 0.01;
  this.life = 1;
};

$.Particle.prototype.step = function (i) {
  this.speed += this.accel;
  this.x += Math.cos(this.angle) * this.speed;
  this.y += Math.sin(this.angle) * this.speed;
  this.angle += $.PI / 64;
  this.accel *= 1.01;
  this.life -= this.decay;

  if (this.life <= 0) {
    $.particles.splice(i, 1);
  }
};

$.Particle.prototype.draw = function (i) {
  $.ctx.fillStyle = $.ctx.strokeStyle =
    `hsla(${$.tick + this.life * 120}, 100%, 60%, ${this.life})`;
  $.ctx.beginPath();
  if ($.particles[i - 1]) {
    $.ctx.moveTo(this.x, this.y);
    $.ctx.lineTo($.particles[i - 1].x, $.particles[i - 1].y);
  }
  $.ctx.stroke();

  $.ctx.beginPath();
  $.ctx.arc(
    this.x,
    this.y,
    Math.max(0.001, this.life * this.radius),
    0,
    $.TWO_PI
  );
  $.ctx.fill();

  const size = Math.random() * 1.25;
  $.ctx.fillRect(
    ~~(this.x + (Math.random() - 0.5) * 35 * this.life),
    ~~(this.y + (Math.random() - 0.5) * 35 * this.life),
    size,
    size
  );
};

$.step = () => {
  $.particles.push(
    new $.Particle({
      x: $.width / 2 + (Math.cos($.tick / 20) * $.min) / 2,
      y: $.height / 2 + (Math.sin($.tick / 20) * $.min) / 2,
      angle: $.globalRotation + $.globalAngle,
      speed: 0,
      accel: 0.01,
    })
  );

  $.particles.forEach((elem, index) => {
    elem.step(index);
  });

  $.globalRotation += $.PI / 6;
  $.globalAngle += $.PI / 6;
};

$.draw = () => {
  $.ctx.clearRect(0, 0, $.width, $.height);

  $.particles.forEach((elem, index) => {
    elem.draw(index);
  });
};

$.init = () => {
  $.canvas = document.createElement("canvas");
  $.ctx = $.canvas.getContext("2d");
  $.width = 300;
  $.height = 300;
  $.canvas.width = $.width * window.devicePixelRatio;
  $.canvas.height = $.height * window.devicePixelRatio;
  $.canvas.style.width = `${$.width}px`;
  $.canvas.style.height = `${$.height}px`;
  $.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
  $.min = $.width * 0.5;
  $.particles = [];
  $.globalAngle = 0;
  $.globalRotation = 0;
  $.tick = 0;
  $.PI = Math.PI;
  $.TWO_PI = $.PI * 2;
  $.ctx.globalCompositeOperation = "lighter";
  document.body.appendChild($.canvas);
  $.loop();
};

$.loop = () => {
  requestAnimationFrame($.loop);
  $.step();
  $.draw();
  $.tick++;
};

$.init();