<canvas></canvas>
<div class="loop"></div>
<div class="no" id="no">X</div>
<div class="days" id="days">DAYS</div>
<div class="line"></div>
<div class="text" id="text">UNTIL CHRISTMAS</div>

body{
  margin: 0;
  padding: 0;
  background: #100d04;
  overflow: hidden;
}

canvas{
  -webkit-filter: blur(8px);
}

div.no{
  position: absolute;
  top: -webkit-calc(50% - 100px);
  left: -webkit-calc(50% - 50px);
  background: rgb(163,114,46); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
  background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3722e', endColorstr='#feda4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  border: 2px solid #e1c15c;
  border-radius: 5px;
  font-family: Arial Black;
  font-size: 72px;
  width: 130px;
  height: 100px;
  text-align: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

div.days{
  position: absolute;
  top: -webkit-calc(50% - 10px);
  left: -webkit-calc(50% - 95px);
  background: rgb(163,114,46); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
  background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3722e', endColorstr='#feda4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Arial Black;
  font-size: 82px;
}

div.line{
  position: absolute;
  top: -webkit-calc(50% + 90px);
  left: -webkit-calc(50% - 140px);
  background: rgb(163,114,46); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
  background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3722e', endColorstr='#feda4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  width: 350px;
  height: 1px;
}

div.text{
  position: absolute;
  top: -webkit-calc(50% + 100px);
  left: -webkit-calc(50% - 110px);
  background: rgb(163,114,46); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
  background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3722e', endColorstr='#feda4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Arial;
  font-size: 32px;
}

div.loop{
  position: absolute;
  top: -webkit-calc(50% - 134px);
  left: -webkit-calc(50% + 12px);
  border: 2px solid #e1c15c;
  border-radius: 0 50px 50px 50px;
  width: 30px;
  height: 30px;
  -webkit-transform: rotate(265deg);
}

div.loop:after{
  content: '';
  position: absolute;
  top: -31px;
  left: 0px;
  border: 2px solid #e1c15c;
  border-radius: 0 50px 50px 50px;
  width: 30px;
  height: 30px;
  -webkit-transform: rotate(280deg);
}

div.loop:before{
  content: '';
  position: absolute;
  top: -8px;
  left: -16px;
  border-left: 2px solid #e1c15c;
  border-bottom: 2px solid #e1c15c;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(230deg);
}

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     ||  
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");

var w = window.innerWidth, h = window.outerHeight;
canvas.width = w;
canvas.height = h;

var circles = 60;
var circle_array = [];

function init(){
  ctx.fillStyle = "#100d04";
  ctx.rect(this.x,this.y,w,h);
  ctx.fill();
  for(var i=0;i<circles;i++){
    var c = new circle();
    circle_array.push(c);
  }
  var d = new Date();
  var day = d.getDate();
  var days_to_go = 25 - day;
  if(d.getMonth() != 11){
    days_to_go = -1;
  }
  if(days_to_go == 0){
    // IT'S CHRISTMAS
    document.getElementById("no").innerHTML = "X";
    document.getElementById("days").innerHTML = "CHRISTMAS";
    document.getElementById("days").style.left = "-webkit-calc(50% - 240px)";
    document.getElementById("text").innerHTML = "IS HERE";
    document.getElementById("text").style.left = "-webkit-calc(50% - 40px)";
  }
  else if(days_to_go < 0){
    // IT'S CHRISTMAS
    document.getElementById("no").innerHTML = "X";
    document.getElementById("days").innerHTML = "CHRISTMAS";
    document.getElementById("days").style.left = "-webkit-calc(50% - 240px)";
    document.getElementById("text").innerHTML = "HAS PAST, COME BACK NEXT YEAR";
    document.getElementById("text").style.left = "-webkit-calc(50% - 240px)";
  }
  else{
    document.getElementById("no").innerHTML = ""+days_to_go+"";
  }
}

function circle(){
  this.x = Math.random()*w;
  this.y = Math.random()*h;
  this.r = 0;
  this.r_max = Math.floor(Math.random() * 55)+15;
  this.opacity = Math.floor(Math.random() * 1)+0.2;
  this.draw = function(){
    ctx.fillStyle = "hsla(48,97%,59%,"+this.opacity+")";
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.r, 0, Math.PI*2, false);
    ctx.fill();
  }
}

function drawscene(){
  ctx.fillStyle = "rgba(0,0,0,1)";
  ctx.rect(0,0,w,h);
  ctx.fill();
  for(var i=0;i<circle_array.length;i++){
    if(circle_array[i].r>=circle_array[i].r_max){
      if(circle_array[i].opacity<0.01){
        circle_array[i] = new circle();
      }
      else{
        circle_array[i].opacity -= 0.01;
      }
    }
    else{
      circle_array[i].r += Math.random()*0.3;
    }
    circle_array[i].draw();
  }
}

function animloop() {
  drawscene();
  requestAnimFrame(animloop); 
}
init();
animloop();