foo logo #02

foo logo #02.markdown

foo logo #02

An animated HTML5 canvas logo. I was toying with the idea of using this for a project, but opted against it.

A Pen by Philip Newborough on CodePen.

License.

index.html

<div id="foologo-wrapper" class="logo"></div>

script.js

var wrapper = document.getElementById('foologo-wrapper');
wrapper.innerHTML += '<canvas id="foologo" width="200" height="200"></canvas>';
var canvas = document.getElementById('foologo');
var c = canvas.getContext('2d');
var interval = 1;

c.fillStyle = 'rgba(255, 255, 255, 1)';
c.fillRect(0,0,200,200);

var render = function()
{
	
	c.fillStyle = 'rgba(255, 255, 255, 1)';
	c.fillRect(0,0,200,200);
	for(y = 20; y <= 160; y = y + 20)
	{
		for(x = 20; x <= 160; x = x + 20)
		{
			r = Math.floor((Math.random() * 3) + 1);
			switch(r)
			{
				case 1:
					c.fillStyle = 'rgba(34, 34, 34, 1)';
					break;
				case 2:
					c.fillStyle = 'rgba(255, 255, 255, 1)';
					break;
				default:
					c.fillStyle = 'rgba(255, 255, 255, 1)';
					break;
			}
			c.fillRect(x,y,20,20);
		}
	}
}

var main = function()
{
	render();
	
	if(interval < 100)
	{
		interval = interval + 1;
	}
	else if(interval < 200)
	{
		interval = interval + 10;
	}
	else if(interval < 300)
	{
		interval = interval + 20;
	}
	else
	{
		interval = interval + 100;
	}

	if(interval < 800)
	{
		setTimeout(function()
		{
			main();
		}, interval);
	}
}

main();

style.css

body {
  background: #222;
}

.logo {
  width: 200px;
  margin: auto;
  margin-top: 40px;
}