Source description for demo by Jon Gjengset.
var drawLength = 0; function drawMore( context, cursors ) { // Only draw if supported if ( !context ) return; for ( var i = 0; i < cursors.length; i++ ) { var cursor = cursors[i]; var random = Math.random() * 100; if ( random < 2 ) { // In some cases, we start moving orthogonally one way var temp = cursor.vx; cursor.vx = cursor.vy; cursor.vy = temp; } else if ( random < 4 ) { // In some cases, we start moving orthogonally the other way var temp = cursor.vx; cursor.vx = -cursor.vy; cursor.vy = -temp; } if ( cursor.x <= 0 ) { cursor.x = 0; cursor.vx = 1 cursor.vy = 0; } if ( cursor.x >= context.canvas.width ) { cursor.x = context.canvas.width; cursor.vx = -1; cursor.vy = 0; } if ( cursor.y <= 0 ) { cursor.y = 0; cursor.vy = 1 cursor.vx = 0; } if ( cursor.y >= context.canvas.height ) { cursor.y = context.canvas.height; cursor.vy = -1; cursor.vx = 0; } context.beginPath(); context.moveTo ( cursor.x, cursor.y ); cursor.x += cursor.step * cursor.vx; cursor.y += cursor.step * cursor.vy; context.lineTo ( cursor.x, cursor.y ); context.stroke(); context.closePath(); } } var d = document; var w = window; var b = d.body; var c = d.getElementById("c"); c.width = w.innerWidth; c.height = w.innerHeight if ( c.getContext ) { c = c.getContext('2d'); c.strokeStyle = '#000000'; c.lineWidth = 1; var step = 3; var time = 100; var quicklyUntilLength = 4000; var cursors = [ { x: 0, y: 0, vx: 1, vy: 0, step: step }, { x: parseInt ( c.canvas.width / 2 ), y: 0, vx: 0, vy: 1, step: step }, { x: c.canvas.width, y: 0, vx: 0, vy: 1, step: step }, { x: c.canvas.width, y: parseInt ( c.canvas.height / 2 ), vx: -1, vy: 0, step: step }, { x: c.canvas.width, y: c.canvas.height, vx: -1, vy: 0, step: step }, { x: parseInt ( c.canvas.width / 2 ), y: c.canvas.height, vx: -1, vy: 0, step: step }, { x: 0, y: parseInt ( c.canvas.height / 2 ), vx: 0, vy: -1, step: step }, { x: 0, y: c.canvas.height, vx: 0, vy: -1, step: step } ]; for ( var i = 0; i < quicklyUntilLength; i += step ) { drawMore ( c, cursors ) } setInterval ( function(){ drawMore ( c, cursors ) }, time ); }