<div class="container">
  <canvas id="bg"></canvas>
</div>

body {
  background: #001c3f;
  /*   width: 100%;
  height: 90%; */
  margin: 0;
  border: 0;
  overflow: hidden; /*  Disable scrollbars */
  display: block; /* No floating content on sides */
}

.container::after {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABxJREFUeNpi+P//PwMIA8FNJgYkwAgSgXEAAgwA8BoHsEna1aoAAAAASUVORK5CYII=);
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: 0 0;
  background-color: rgba(0, 0, 0, 0);
  content: "";
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
  border-radius: 25px;
}

.container {
  border: 0;
  padding: 0;
  /*   overflow: hidden; */
  margin: 0 auto;
  width: 90%;
  height: 90%;
}

#bg {
  -webkit-filter: blur(35px);
  filter: blur(35px);
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
}

$(function () {
  var mainCanvas = document.getElementById("bg");
  var mainContext = mainCanvas.getContext("2d");
  var theWidth = window.innerWidth;
  var theHeight = window.innerHeight;
  mainCanvas.width = theWidth;
  mainCanvas.height = theHeight;

  var howManyCircles = 40;

  var circles = new Array();

  var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;

  function Circle(radius, speed, size, xPos, yPos, opacity, circleColor) {
    this.radius = radius;
    this.speed = speed;
    this.size = size;
    this.xPos = xPos;
    this.yPos = yPos;
    this.opacity = opacity;
    this.circleColor = circleColor;

    this.counter = 0;

    var signHelper = Math.floor(Math.random() * 2);

    if (signHelper == 1) {
      this.sign = -1;
    } else {
      this.sign = 1;
    }
  }

  Circle.prototype.update = function () {
    this.counter += (this.sign * this.speed) / 20;

    mainContext.beginPath();
    mainContext.arc(
      this.xPos + Math.cos(this.counter / 100) * this.radius,
      this.yPos + Math.sin(this.counter / 100) * this.radius,
      this.size,
      0,
      Math.PI * 2,
      false
    );

    mainContext.closePath();
    mainContext.fillStyle = this.circleColor + this.opacity + ")"; //dark blue

    mainContext.fill();
  };

  // Register an event listener to
  // call the resizeCanvas() function each time
  // the window is resized.
  window.addEventListener("resize", resizeCanvas, false);

  // Draw canvas border for the first time.
  resizeCanvas();

  function setupCircles() {
    //console.log("setup");

    for (var i = 0; i < howManyCircles; i++) {
      var opacity = 0.25 + Math.random() * 0.4;
      var speed = 1 + Math.random() * 8;
      var size = (1.6 - opacity) * (130 + Math.random() * 200);
      var radius = 100 + Math.random() * 100;
      var randomX = Math.round(Math.random() * (theWidth + size)) - size / 2;
      var randomY = Math.round(Math.random() * (theHeight + size)) - size / 2;

      var colorRadomizer = (i / howManyCircles) * 100;

      if (colorRadomizer <= 40) {
        var circleColor = "rgba(26, 99, 142,"; //blue
      } else if (colorRadomizer > 40 && colorRadomizer <= 80) {
        var circleColor = "rgba(0, 125, 105,"; //green
      } else {
        var circleColor = "rgba(21, 216, 223,"; //aqua
        size /= 2;
        radius /= 2;
        opacity /= 2;
      }

      var circle = new Circle(
        radius,
        speed,
        size,
        randomX,
        randomY,
        opacity,
        circleColor
      );
      circles.push(circle);
    }
    drawAndUpdate();
  }

  function drawAndUpdate() {
    //console.log("draw & update " + theWidth + " " + theHeight);
    requestAnimationFrame(drawAndUpdate);

    mainContext.clearRect(0, 0, theWidth, theHeight);

    for (var i = 0; i < circles.length; i++) {
      var myCircle = circles[i];
      myCircle.update();
    }
  }

  // Runs each time the DOM window resize event fires.
  // Resets the canvas dimensions to match window,
  // then draws the new borders accordingly.
  function resizeCanvas() {
    //console.log("resized");

    theWidth = window.innerWidth;
    theHeight = window.innerHeight;
    mainCanvas.width = theWidth;
    mainCanvas.height = theHeight;

    setupCircles();
  }
});