diff --git a/app/src/main/assets/app/bg_animations.js b/app/src/main/assets/app/bg_animations.js
index 0da1774ab..6b8077a93 100644
--- a/app/src/main/assets/app/bg_animations.js
+++ b/app/src/main/assets/app/bg_animations.js
@@ -1,6 +1,126 @@
 
 function createClearSkyDay(){
-  
+  var canvas = document.querySelector('canvas');
+
+// setting window sizes in vars
+var windowWidth = window.innerWidth;
+var windowHeight = window.innerHeight;
+// setting canvas params
+canvas.width = windowWidth;
+canvas.height = windowHeight;
+// settings for canvas sizes stored here for later
+canvasWidth = windowWidth;
+canvasHeight = windowHeight;
+
+// start drawing
+var paintbrush = canvas.getContext('2d');
+
+
+
+// function to get a random number between 2 digits
+function getRandom(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+
+
+// js object to provide circles
+function Circle(x, y, dx, dy, radius) {
+   this.x = x;
+   this.y = y;
+   this.dx = dx;
+   this.dy = dy;
+   this.radius = radius;
+   
+   this.draw = function() {
+      // draw circle
+      paintbrush.beginPath();
+      paintbrush.arc(this.x,this.y,this.radius,0,Math.PI*2, false);
+      paintbrush.strokeStyle = 'blue';
+      paintbrush.stroke();
+   }
+   
+   this.update = function() {
+      // if meets edge of canvas
+      if (this.x + this.radius  > canvasWidth || this.x - this.radius  < 0) {
+         this.dx = -this.dx;
+      }
+      if (this.y + this.radius  > canvasHeight || this.y - this.radius  < 0) {
+         this.dy = -this.dy;
+      }
+
+      // get moving in first place
+      this.x += this.dx;
+      this.y += this.dy;
+      // draw called each time it updates, so it reappears
+      this.draw();
+   }
+}
+
+
+
+// array of circle items
+var circleArray = [];
+for (var i = 0; i < 12; i++) {
+   // get randomised numbers
+   var radius = 40;
+   // start point (randomised), also to not get circle caught at 0
+   var x = Math.random() * (canvasWidth - radius * 2) + radius;
+   var y = Math.random() * (canvasHeight - radius * 2) + radius;
+   // x velocity (randomised)
+   var randVelocity = Math.floor(getRandom(3, 6));
+   var dx = (Math.random() - 0.5) * randVelocity;
+   var dy = (Math.random() - 0.5) * randVelocity;
+   circleArray.push(new Circle(x, y, dx, dy, radius));
+}
+
+
+// animation loop, keeps on goin and goin
+function animate() {
+   requestAnimationFrame(animate);
+   // clear canvas after every frame
+   paintbrush.clearRect(0,0,canvasWidth,canvasHeight);
+   for (var i = 0; i < circleArray.length; i++) {
+      circleArray[i].update();
+   }
+}
+
+animate();
+
+
+
+
+
+
+// old useful basics
+
+// shapes
+// --rectangle
+// paintbrush.fillStyle = 'purple';
+// paintbrush.fillRect(100,60,400,200);
+// --lines
+// paintbrush.beginPath();
+// paintbrush.moveTo(200, 50);
+// paintbrush.lineTo(300, 120);
+// paintbrush.lineTo(500, 350);
+// paintbrush.strokeStyle = 'green';
+// paintbrush.stroke();
+// --arc/circle
+// paintbrush.beginPath();
+// paintbrush.arc(400,400,50,0,Math.PI*2, false);
+// paintbrush.strokeStyle = 'blue';
+// paintbrush.stroke();
+
+// multiple things
+// for (var i = 0; i < 10; i++) {
+//    var xRand = Math.random() * windowWidth;
+//    var yRand = Math.random() * windowHeight;
+//    var colourEach = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
+//    paintbrush.beginPath();
+//    paintbrush.arc(xRand,yRand,50,0,Math.PI*2, false);
+//    paintbrush.strokeStyle = colourEach;
+//    paintbrush.stroke();
+// }
 }