Canvas mit Bezier Curve

Lediglich 32 Codezeilen lang ist der Code zum erzeugen dieser spassigen „leuchten Linien im Dunklen“ – incl. HTML-Canvas. Es wird dafür mithilfe einiger Zufallszahlen alle 50ms eine neue Kurve erzeugt (bezierCurve) die verblasst indem sich über den canvas in jeder Schleife ein schwarzes rectangle (mit alpha 0.1) legt. Der „glow“ um die Kurve wird durch einen Schatten mit weißer Farbe erzeugt. Beeindruckt?

Und hier der code zur bezierCurve

<canvas width="650" height="450" style="margin-left:-30px"></canvas>
<script>
 var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 var lastX = context.canvas.width * Math.random();
 var lastY = context.canvas.height * Math.random();
 var hue = 0;
 function line() {
   context.save();
   context.translate(context.canvas.width/2, context.canvas.height/2);
   context.scale(0.9, 0.9);
   context.translate(-context.canvas.width/2, -context.canvas.height/2);
   context.beginPath();
   context.lineWidth = 5 + Math.random() * 10;
   context.moveTo(lastX, lastY);
   lastX = context.canvas.width * Math.random();
   lastY = context.canvas.height * Math.random();
   context.bezierCurveTo(context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         lastX, lastY);
   hue = hue + 10 * Math.random();
   context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
   context.shadowColor = 'white';
   context.shadowBlur = 10;
   context.stroke();
   context.restore();
 }
 setInterval(line, 50);
 function blank() {
   context.fillStyle = 'rgba(0,0,0,0.1)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 }
 setInterval(blank, 40);
</script>

Das ganze stammt vom w3c: Example Canvas bezierCurve