body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	background-color: white;
}

import Canvas from "https://codepen.io/JuanFuentes/pen/xxKrBVg.js";
const colors = ["#018ddc", "#f12a00", "#ec6546", "#b0c90d"];
const PI2 = Math.PI * 2;
class Bubble {
	constructor(args) {
		this.x = args.x;
		this.y = args.y;
		this.move = Math.random() * 5 - 10;
		this.color = colors[Math.floor(Math.random() * colors.length)];
		this.radius = ~~ (Math.random() * 250);
	}
	update(_time) {
		this.x -= Math.sin(_time + this.move) * this.move;
		this.y += Math.cos(_time - this.move) * this.move;
	}
	draw(_ctx, _time) {
		this.update(_time);
		_ctx.beginPath();
		_ctx.fillStyle = this.color;
		_ctx.arc(this.x, this.y, this.radius, 0, PI2, false);
		_ctx.fill();
		_ctx.closePath();
	}
}

class Blubble extends Canvas {
	constructor(containerId) {
		super(containerId);
		this.totalBubbles = 25;
		this.bubbles = [];
		this.set();
		this.animate();
	}

	set() {
		for (var i = 0; i < this.totalBubbles; i++) {
			let _bubble = new Bubble({
				x: Math.random() * this.canvas.width,
				y: Math.random() * this.canvas.height
			});
			this.bubbles.push(_bubble);
		}
	}

	animate() {
		let time = new Date().getTime() * 0.0005;
		requestAnimationFrame(this.animate.bind(this));
		this.render(time);
	}

	render(time) {
		this.clear();
		this.context.filter = 'blur(30px)';
		this.gradient(this.context, time);
		this.context.save();
		this.context.globalCompositeOperation = "lighter";
		for (var i = 0; i < this.bubbles.length; i++) {
			this.bubbles[i].draw(this.context, time);
		}
		this.context.restore();
	}
	
	gradient(_ctx, _time) {
			let x = this.center.x + (Math.cos(_time + 100) * 300);
			let y = this.center.y + (Math.sin(_time + 100) * 300);
			let grd = _ctx.createRadialGradient(x, y, 0, this.canvas.width, this.canvas.height, this.canvas.width);
      grd.addColorStop(0, 'rgb(255, 252, 0)');
      grd.addColorStop(0.1, 'rgb(1, 141, 220)');
      grd.addColorStop(0.8, 'rgb(241, 42, 0)');
      grd.addColorStop(1, 'rgb(176, 201, 13)');
      _ctx.fillStyle = grd;
      _ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
	}
}

let _foo = new Blubble();