tunnel.html

<!-- from http://www.p01.org/releases/20_lines_twinkle/ -->
<canvas id="tunnel" width="640" height="480"></canvas>
 
<script type="text/javascript">
var WIDTH = 640;
var HEIGHT = 480;
 
var CENTER_X = WIDTH / 2;
var CENTER_Y = HEIGHT / 2;

var SLICES = 12;
var RADIUS = 24;

var ANGLE = 2 * Math.PI / SLICES;
var DIV = 1 / ANGLE;
 
onmousemove = function(event) {
    window.mouse = [ (window.event||event).screenX, (window.event||event).screenY ];
}
 
function start() {
    setInterval( draw, 33 );
}

function draw() {
    var now = new Date().getTime() + (window.mouse || [0, 0])[0] * 2 - 200;
 
    var canvas = document.getElementById('tunnel');
    var ctx = document.getElementById('tunnel').getContext('2d');
    ctx.globalCompositeOperation = 'copy';
    var x = WIDTH / 20 + Math.cos(now / 806 + (window.mouse || [0,0])[0] / 128);
    var y = HEIGHT / 20 + Math.sin(now / 551 + (window.mouse || [0,0])[1] / 128);
    ctx.drawImage(canvas, x, y, WIDTH - WIDTH / 10, HEIGHT - HEIGHT / 10, 0, 0, WIDTH, HEIGHT);
    ctx.globalCompositeOperation = 'source-over';
 
    for (var j = 0; j < SLICES; j++) {
        var a = j / DIV + ((Math.cos(now / 1337) + now / 4096) % 1.2566);
        ctx.beginPath();
        ctx.moveTo(CENTER_X - Math.sin(now / 618), CENTER_Y + Math.cos(now / 523));
        ctx.arc(CENTER_X, CENTER_Y, RADIUS, a, a + ANGLE, 0);
        ctx.closePath();
        ctx.fillStyle = '#' + ('00' + (Math.random() * 0xfff & (j & 1 ? 0x17f : 0xf31)).toString(16)).slice(-3);
        ctx.fill();
    }
}

start();
</script>