<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <canvas id="canvas"></canvas>

body { margin: 0; } html, body, #canvas { width: 100%; height: 100%; }

jQuery(document).ready(function($){ var windowXArray = [], windowYArray = []; for (var i = 0; i < $(window).innerWidth(); i++) { windowXArray.push(i); } for (var i = 0; i < $(window).innerHeight(); i++) { windowYArray.push(i); } function randomPlacement(array) { var placement = array[Math.floor(Math.random()*array.length)]; return placement; } var canvas = oCanvas.create({ canvas: '#canvas', background: '#000', fps: 60 }); setInterval(function(){ var rectangle = canvas.display.ellipse({ x: randomPlacement(windowXArray), y: randomPlacement(windowYArray), origin: { x: 'center', y: 'center' }, radius: 0, fill: '#E80C7A', opacity: 1 }); canvas.addChild(rectangle); rectangle.animate({ radius: 10, opacity: 0 }, { duration: '1000', easing: 'linear', callback: function () { this.remove(); } }); }, 100); $(window).resize(function(){ canvas.width = $(window).innerWidth(); canvas.height = $(window).innerHeight(); }); $(window).resize(); });