JavaScript
var canvas, ctx;
window.onload = function()
{
canvas = document.getElementById("put-a-bird-on-it");
if(canvas.getContext)
{
ctx = canvas.getContext('2d');
ctx.transform(window.innerWidth/2, window.innerHeight/2);
}
center(canvas);
animate();
};
window.onresize = function() {
center(canvas);
};
function animate() {
requestAnimFrame( animate );
draw();
}
function draw() {
var time = new Date().getTime() * 0.002;
var degrees = Math.sin( time ) * 5;
console.log(degrees);
canvas.style.WebkitTransform = "rotate("+degrees+"deg)";
ctx.fillStyle = 'rgb(256, 256, 256)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw the bird!
poly([
[71,0],
[91,20],
[111,0]
], "#4db4d7", "#4db4d7");
poly([
[10,105],
[90,185],
[130,185],
[130,15],
[110,0]
], "#6acada", "#36abd7");
poly([
[209,299],
[324,184],
[439,309]
], "#3eaed6", "#70ccd9");
poly([
[209,299],
[324,184],
[439,304]
], "#3eaed6", "#70ccd9");
poly([
[88,184],
[208,304],
[328,184]
], "#3cc4ea", "#70ccd9");
poly([
[10,104],
[10,304],
[210,304]
], "#6acada", "#36abd7");
poly([
[0,304],
[0,504],
[200,304]
], "#44c4e7", "#77c9d4");
}
/**
* @param x - Point array with x,y pair
* @param y - Point array with x,y pair
* @param z - Point array with x,y pair
* @param o - Offset
* @param c1 - Gradient start color
* @param c2 - Gradient end color
*/
function poly(points, c1, c2) {
var grd = ctx.createLinearGradient(points[0][0], points[0][1], points[2][0], points[2][1]);
grd.addColorStop(0, c1);
grd.addColorStop(1, c2);
ctx.beginPath();
var length = points.length;
ctx.moveTo(points[0][0], points[0][1]);
...