var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'lime'; canvas.style.background = "black"; var code = [ 'html','head','title','base','link','meta','style','script', 'noscript','body','section','nav','article','aside','h1','h2', 'h3','h4','h5','h6','hgroup','header','footer','address','main', 'p','hr','pre','blockquote','ol','ul','li','dl','dt','dd', 'figure','figcaption','div','a','em','strong','small','s','cite', 'q','dfn','abbr','data','time','code','var','samp','kbd','sub', 'sup','i','b','u','mark','ruby','rt','rp','bdi','bdo','span','br', 'wbr','ins','del','img','iframe','embed','object','param','video', 'audio','source','track','canvas','map','area','svg','math', 'table','caption','colgroup','col','tbody','thead','tfoot','tr', 'td','th','form','fieldset','legend','label','input','button', 'select','datalist','optgroup','option','textarea','keygen', 'output','progress','meter','details','summary','command','menu' ]; // make 100 things to fall with a random code element and random starting location var tags = []; var count = 100; for (var i = 0; i < count; i++) { var a = {}; // randomly pick one tag a.code = code[Math.round(Math.random() * code.length)]; a.x = Math.random() * 500; // random X a.y = Math.random() * 500 - 500; // random Y that is above the screen a.speed = Math.random() * 10; tags.push(a); } setInterval(function() { ctx.clearRect(0, 0, 500, 500); for (var i = 0; i < count; i++) { var a = tags[i]; ctx.fillText(a.code, a.x, a.y); a.y += a.speed; // fall downwards by the speed amount if (a.y > 600) a.y = -50; // if off the screen at bottom put back to top } }, 90);
<canvas id="canvas" width="500" height="500"></canvas>
* { margin: 0; padding: 0; } body { color: green; }