foo logo #01

foo logo #01.markdown

foo logo #01

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');

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

function render()
{
  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);
    }
  }
}

function main()
{
  setInterval(function()
  {
    render();
  }, 1000);  
}

main();

style.css

body {
  background: #222;
}

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