<canvas id="canvas" width='400' height='400'></canvas>
@import "compass/css3";

body {
  background-color: rgba(219, 244, 77, 0.6);
  background-image: linear-gradient(
      1deg,
      rgba(167, 219, 219, 0.8) 40%,
      rgba(255, 255, 240, 0.6) 55%
    ),
    linear-gradient(190deg, rgba(224, 228, 204, 0.3) 100%, transparent 50%);
  background-size: cover; 
}

#canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border-radius: 50%;
}
Object.getOwnPropertyNames(Math).map(function(p) {
  window[p] = Math[p];
});

var DIM = 27, 
    c = document.querySelector('canvas'), 
    w = c.width, h = c.height, 
    ctxt = c.getContext('2d'),
    rows = round(h/DIM + 1), 
    cols = round(w/DIM + 1), 
    offset_x = (w - cols*DIM)/2, 
    offset_y = (h - rows*DIM)/2, 
    astro = [], t = 0, k = 1.7;

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var x=200,
    y=200,
    // Raddi of the white glow.
    innerRadius=20,
    outerRadius=230,
    // Radius of the entire circle.
    radius=20;

var grd=ctx.createRadialGradient(x, y, innerRadius, x, y,outerRadius);
grd.addColorStop(0, 'rgba(0,0,0,0)');
grd.addColorStop(.1, 'gold');
grd.addColorStop(.5, 'orangered');
grd.addColorStop(.6, 'cyan');
grd.addColorStop(.7, 'red');
grd.addColorStop(.8, 'teal');
ctx.strokeStyle=grd;
ctx.fill();


var Astroid = function(pos, r) {
  var a, b, dx, dy;
  
  this.pos = 
    (pos && pos.x && pos.y && 
     pos.x === pos.x && pos.y === pos.y &&
     typeof pos.x === 'number' && 
     typeof pos.y === 'number') ? 
    pos : { 'x': 4, 'y': -2 };
  a = b = this.r = r || .89*DIM;
  dx = w/2 - this.pos.x;
  dy = h/2 - this.pos.y;
  this.d = sqrt(dx*dx + dy*dy);
      
  this.squish = function(t) {
    var alpha = -t + this.d/DIM/1.1;
    
    a = ~~(this.r*(k + max(-k, min(k, pow(cos(alpha), 1))))/k/2);
    b = ~~(this.r*(k + max(-k, min(k, pow(cos(alpha + PI), 7))))/k/1.3);
  };
  
  this.draw = function(ctx) {
    var qa;
        
    ctx.moveTo(this.pos.x, this.pos.y - b+4*a);
    
    for(var i = 0; i < 6; i++) {
      qa = i*PI/5;
      ctx.quadraticCurveTo(
        this.pos.x, 
        this.pos.y, 
        this.pos.x + b*cos(qa), 
        this.pos.y + b*sin(qa));
    }
    
  };
};

var ani = function() {
  var v = t/25, idx;
  ctxt.clearRect(0, 0, w, h);
  
  ctxt.beginPath();
  
  for(var i = 0; i < rows; i++) {
    for(var j = 0; j < cols; j++) {
      idx = i*rows + j;
      astro[idx].squish(v);
      astro[idx].draw(ctxt);
    }
  }
  
  ctxt.closePath();
  ctxt.stroke();
  
  t++;
  
  requestAnimationFrame(ani);
};

for(var i = 0; i < rows; i++) {
  for(var j = 0; j < cols; j++) {
    astro.push(new Astroid({
      'x': offset_x + j*DIM, 
      'y': offset_y + i*DIM
    }));
  }
}

ani();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.