March 13, 2014 17:39 · Mar 13, 2014
diff --git a/An-Anonymous-Pen.markdown b/An-Anonymous-Pen.markdown
@@ -0,0 +1,7 @@
+An Anonymous Pen
+----------------
+They just move,if they find a 'friend' they get bigger
+
+A [Pen](http://codepen.io/anon/pen/AegJz) by [A Non Ymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/anon/pen/AegJz/license).
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<canvas></canvas>
diff --git a/script.js b/script.js
@@ -0,0 +1,98 @@
+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);
+})();
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,7 @@
+
+*{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;
+}