<div id="snow">
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 400" enable-background="new 0 0 600 400" xml:space="preserve">
   
    <circle id="head" cx="300" cy="191" r="124.3"/>
  <p><b class="percentage"></b></p>
    <path id="mouth" d="M258.3,235c2.6,20.7,20.3,36.7,41.7,36.7c21.4,0,39-16,41.7-36.7L258.3,235L258.3,235z"/>
  
    <div id="eyes">
        <path d="M344.9,216.4
          c0-10.9,5.1-19.7,11.5-19.7s11.5,8.8,11.5,19.7"/>
        <path d="M232,216.4
          c0-10.9,5.1-19.7,11.5-19.7c6.3,0,11.5,8.8,11.5,19.7"/>
    </div>
  
    <div id="teeth">
        <path d="M269.2,235c0.7,7.6,1.6,12.2,2.6,12.2c1,0,1.9-4.6,2.6-12.2H269.2z"/>
        <path d="M325.6,235c0.7,7.6,1.6,12.2,2.6,12.2c1,0,1.9-4.6,2.6-12.2H325.6z"/>
    </div>
  
    <path id="nose" d="M300.3,194c-10,0-19.1,2.4-26.1,6.3c0.6,2.7,1.4,5.2,2.3,7.5c15.9-0.5,15.9,6.7,6.2,10.6
        c8.2,9.6,27.8,11.4,35.5,1.4c-11.3-6.3-5.6-11.3,5.2-10.2c0.9-2.8,1.7-6,2.3-9.6C318.9,196.3,310,194,300.3,194z"/>
</svg>
<script src="https://bloggerxtutorials.googlecode.com/files/blacksparkle-min.js" type="text/javascript"></script>
 <p><b class="percentage"></b></p>
body {
  background: #30292c;
}
 path:hover
{
   opacity: 0.5;
	  }
#head {
  fill: #c1b2a3;
}

#nose {
  fill: #60432e;
}

#mouth {
  fill: #d14d37;
}

#teeth path {
  fill: #fff;
}

#eyes path {
  fill: none;
  stroke: #1b426d;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-opacity: 0.7;
}

body { background-color:#333; }
#snow{
	background: none;
	font-family: Androgyne;
	background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:1;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}	
* {
  box-sizing: border-box;
}

@primary: #;

body {
  background: #8899A6;
  font-family: "AvenirNext-Regular", Avenir, Helvetica, Arial, sans-serif;
}
.loading-indicator {
  animation: rotatefull 9s 0s infinite linear forwards;
  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 1.3rem;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
svg {
  animation: scaleup .5s 0s 1 ease-in-out forwards;

  circle {
    stroke: @primary;
    fill: none;
    &:last-of-type {
      opacity: 0;
      stroke: #ddd;
      //animation-fill-mode: forwards;
      transition: stroke-dashoffset .5s ease-out;
    }
  }
  
  .complete & {
    animation-name: scaledown;
  }
}

p {
  text-align: center;
  color: @primary;
  font-size: 2rem;
  position: absolute;
  top: 3rem;
  left: 0;
  right: 0;
  .complete & {
    animation: scaledown .5s 0s 1 ease-in-out forwards;
  }
}


@keyframes rotatefull {
  0% {
    transform: translate3d(-50%, 0, 0) rotate(0);
  }
  20% {
    transform: translate3d(-50%, 0, 0) rotate(72deg);
  }
  40% {
    transform: translate3d(-50%, 0, 0) rotate(144deg);
  }
  60% {
    transform: translate3d(-50%, 0, 0) rotate(216deg);
  }
  80% {
    transform: translate3d(-50%, 0, 0) rotate(288deg);
  }
  99%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(360deg);
  }
}

@keyframes scaleup {
  0% {
    transform: scale(.1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  72% {
    transform: scale(1.1);
  }
  84% {
    transform: scale(.95);
  }
  98% {
    transform: scale(1);
  }
  99% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }  
}

@keyframes scaledown {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15% {
    transform: scale(1.2);
  }
  60% {
    opacity: 1;
  }
  99%, 100% {
    transform: scale(.1);
    opacity: 0;
  }
  
}
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);


var sparks=75;
var speed=33;
var bangs=5;
var colours=new Array('#03f', '#f03', '#0e0', '#93f', '#0cf', '#f93', '#f0c');
 
var intensity=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var timers=new Array();
var swide=800;
var shigh=600;
var sleft=sdown=0;
var count=0;
 
function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}
 
addLoadEvent(clicksplode);
 
function clicksplode() { if (document.getElementById) {
  var i, j;
  window.onscroll=set_scroll;
  window.onresize=set_width;
  document.onclick=eksplode;
  set_width();
  set_scroll();
  for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {
    stars[j]=createDiv('*', 13);
    document.body.appendChild(stars[j]);
  }
}}
 
function createDiv(char, size) {
  var div, sty;
  div=document.createElement('div');
  sty=div.style;
  sty.font=size+'px monospace';
  sty.position='absolute';
  sty.backgroundColor='transparent';
  sty.visibility='hidden';
  sty.zIndex='101';
  div.appendChild(document.createTextNode(char));
  return (div);
}
 
function bang(N) {
  var i, Z, A=0;
  for (i=sparks*N; i<sparks*(N+1); i++) {
    if (decay[i]) {
      Z=stars[i].style;
      Xpos[i]+=dX[i];
      Ypos[i]+=(dY[i]+=1.25/intensity[N]);
      if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;
      else {
        Z.left=Xpos[i]+'px';
        Z.top=Ypos[i]+'px';
      }
      if (decay[i]==15) Z.fontSize='7px';
      else if (decay[i]==7) Z.fontSize='2px';
      else if (decay[i]==1) Z.visibility='hidden';
      decay[i]--;
    }
        else A++;
  }
  if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);
}
 
function eksplode(e) {
  var x, y, i, M, Z, N;
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
  N=++count%bangs;
  M=Math.floor(Math.random()*3*colours.length);
  intensity[N]=5+Math.random()*4;
  for (i=N*sparks; i<(N+1)*sparks; i++) {
    Xpos[i]=x;
    Ypos[i]=y-5;
    dY[i]=(Math.random()-0.5)*intensity[N];
    dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
    decay[i]=16+Math.floor(Math.random()*16);
    Z=stars[i].style;
    if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];
    else if (M<2*colours.length) Z.color=colours[count%colours.length];
    else Z.color=colours[i%colours.length];
    Z.fontSize='13px';
    Z.visibility='visible';
  }
  clearTimeout(timers[N]);
  bang(N);
}
 
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min-7;
  shigh=sh_min-7;
}
 
function set_scroll() {
  if (typeof(self.pageYOffset)=='number') {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}
var paths = document.getElementsByClassName('styled');
var path = paths[paths.length-1];
var counter = 0;
var total = 47;

var length = path.r.baseVal.value * 2 * Math.PI;

$(path).css({
  'stroke-dasharray': length,
  'stroke-dashoffset': 0,
  'opacity': 1,
})

//simulate multiple requests completing at random times. setTimeout acts as success handler for ajax calls.
for (var i = 0; i < total; ++i) {
  setTimeout( function() {
    counter++;
    var percentage = Math.ceil(100*counter/total);
    $('.percentage').text(percentage)
    $(path).css({
      'stroke-dashoffset': -((counter/total)*length),
    });
    
    if (percentage >= 100) {
      setTimeout(function() {
      document.getElementById('progress').classList.add('complete'); document.body.classList.add('complete');
      }, 500);
    }
  }, (Math.random() * 5000));
}
 var width = "100%",
    height = "100%";

var i = 0;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

function particle() {
  var m = d3.mouse(this);

  svg.insert("circle", "rect")
      .attr("cx", m[0])
      .attr("cy", m[1])
      .attr("r", 5) // 1e-6
      .style("stroke", d3.hsl(100, .1, .6))
      .style("stroke-opacity", 1)
    .transition()
      .duration(2000)
      .ease(Math.sqrt)
      .attr("r", 100)
      .style("stroke-opacity", 1e-6)
    	.style("stroke-width", 100)
      .remove();

  d3.event.preventDefault();
}
       

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.