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.
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.
<div id="foologo-wrapper" class="logo"></div> |
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(); |
body { | |
background: #222; | |
} | |
.logo { | |
width: 200px; | |
margin: auto; | |
margin-top: 40px; | |
} |