A Pen by Rik Schennink.

index.html

<div class="orb"></div>

Particles,-humankinds-only-weakness.markdown

Particles, humankind's only weakness

Who doesn't like particles!?

Particle effect combined with css filters.

// Not the best on Firefox.

A Pen by Rik Schennink on CodePen.

License.

script.js

var getV = function() {
  return 5 * (Math.random() - .5);
}
var getP = function() {
  return 5 * (Math.random() - .5);
}

// flake class
function Flake() {
  
  this._node = document.createElement('div');
  this._node.className = 'flake';
  
  this._vec = {x:getV(),y:getV()};
  this._pos = {x:this._vec.x * 40,y:this._vec.y * 40 - 10};
  
  this._scale = 2 + Math.random();
  this._scale = Math.max(0,this._scale - (.03 * 60));

  if ((this._pos.x * this._pos.x + this._pos.y *  this._pos.y) < 8000) {
    this._render();
  }

};

Flake.prototype = {
  
  getNode:function() {
    return this._node;
  },
  
  update:function() {
    
    if (!this._pos) {
      this._pos = {x:0,y:0};
      this._vec = {x:getV(),y:getV()};
      this._scale = 2 + Math.random();
    }
    
    this._vec.y += .05;
    
    this._pos.x += this._vec.x;
    this._pos.y += this._vec.y;
    this._scale = Math.max(0,this._scale - .035);

    this._render();
    
    if ((this._pos.x * this._pos.x + this._pos.y *  this._pos.y) > 100000) {
      this._pos = null;
    }
    
  },
  
  _render:function() {
    
    var transform = 'translate3d(' + this._pos.x + 'px,' + this._pos.y +'px,0) scale('+ this._scale +')';
    
    this._node.style['msTransform'] = transform;
    this._node.style['webkitTransform'] = transform;
    this._node.style['MozTransform'] = transform;
    this._node.style['OTransform'] = transform;
    this._node.style['transform'] = transform;
    
  }
  
};


// the flakes
var MAX_FLAKES = 300;
var orb = document.querySelector('.orb');
var flakes = new Array(MAX_FLAKES);
var flake;
var i=0;


// setup flakes
for (;i<MAX_FLAKES;i++) {
  flake = new Flake();
  var node = flake.getNode();
  orb.appendChild(node);
  flakes[i] = flake;
}


// the flake creator
var tick = function() {
  
  // update flakes
  for (i=0;i<MAX_FLAKES;i++) {
    flake = flakes[i];
    flake.update();
  }
  
  // next tick
  requestAnimationFrame(function(){
    tick();
  })
  
}

// start ticking
setTimeout(function(){
  tick();
},250);

style.scss

@keyframes glow {
  from {
    transform:scale(1);
  }

  to {
    transform:scale(1.125);
  }
}

html,body {
  height:100%;
  width:100%;
  overflow:hidden;
  padding:0;
  margin:0;
}

body {
  background:#110c1e;
  text-align:center;
  filter:contrast(3);
}

.orb {
  display:inline-block;
  position:relative;
  top:50%;
  transform:translateY(-50%);
  width:2rem;
  height:2rem;
  background:#fff;
  box-shadow:0 0 80px #ebd4ff,0 0 20px #f6ffe1,0 0 10px #f6ffe1;
  border-radius:50%;
  filter:blur(1px);
  
  &::after,
  &::before {
    position:absolute;
    animation-name:glow;
    animation-iteration-count:infinite;
    animation-direction: alternate;
    top:50%;
    left:50%;
    content:'';
    background: radial-gradient(ellipse at center, rgba(240,255,255,.05) 0%,rgba(240,255,255,0) 50%);
  }
  
  &::after {
    animation-duration:1s;
    width:40rem;
    height:.5rem;
    margin-left:-20rem;
    margin-top:-.25rem;
  }
  
  &::before {
    animation-duration:.25s;
    width:20rem;
    height:2rem;
    margin-left:-10rem;
    margin-top:-1rem;
  }
}

.flake {
  position:absolute;
  left:50%;
  top:50%;
  background:#fff;
  width:.25rem;
  height:.25rem;
  margin-top:-.125rem;
  margin-left:-.125rem;
  border-radius:50%;
  box-shadow:0 0 20px #f6ffe1,0 0 10px #f6ffe1;
}