A Pen By
Elton Kamami

` ````
<canvas></canvas>
```

` ````
*{margin:0;padding:0;}body{background:#222;}
canvas{
position:absolute;
border:5px solid rgba(255,255,255,0.1);
box-shadow:inset 0 0 100px #4162a9;
transform:translateZ(0);
}
```

` ````
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
particles = [],
patriclesNum = 500,
w = 500,
h = 500,
colors = ['#f35d4f','#f36849','#c0d988','#6ddaf1','#f1e85b'];
canvas.width = 500;
canvas.height = 500;
canvas.style.left = (window.innerWidth - 500)/2+'px';
if(window.innerHeight>500)
canvas.style.top = (window.innerHeight - 500)/2+'px';
function Factory(){
this.x = Math.round( Math.random() * w);
this.y = Math.round( Math.random() * h);
this.rad = Math.round( Math.random() * 1) + 1;
this.rgba = colors[ Math.round( Math.random() * 3) ];
this.vx = Math.round( Math.random() * 3) - 1.5;
this.vy = Math.round( Math.random() * 3) - 1.5;
}
function draw(){
ctx.clearRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
for(var i = 0;i < patriclesNum; i++){
var temp = particles[i];
var factor = 1;
for(var j = 0; j<patriclesNum; j++){
var temp2 = particles[j];
ctx.linewidth = 0.5;
if(temp.rgba == temp2.rgba && findDistance(temp, temp2)<50){
ctx.strokeStyle = temp.rgba;
ctx.beginPath();
ctx.moveTo(temp.x, temp.y);
ctx.lineTo(temp2.x, temp2.y);
ctx.stroke();
factor++;
}
}
ctx.fillStyle = temp.rgba;
ctx.strokeStyle = temp.rgba;
ctx.beginPath();
ctx.arc(temp.x, temp.y, temp.rad*factor, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(temp.x, temp.y, (temp.rad+5)*factor, 0, Math.PI*2, true);
ctx.stroke();
ctx.closePath();
temp.x += temp.vx;
temp.y += temp.vy;
if(temp.x > w)temp.x = 0;
if(temp.x < 0)temp.x = w;
if(temp.y > h)temp.y = 0;
if(temp.y < 0)temp.y = h;
}
}
function findDistance(p1,p2){
return Math.sqrt( Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) );
}
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
(function init(){
for(var i = 0; i < patriclesNum; i++){
particles.push(new Factory);
}
})();
(function loop(){
draw();
requestAnimFrame(loop);
})();
```

999px

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Loading
..................

Alt
Opt
Find & Replace

Also see: Tab Triggers