1 <!DOCTYPE >
2 <html >
3 <body>
4 <canvas width="800" height="450"></canvas>
5 <script>
6 var context = document.getElementsByTagName('canvas')[0].getContext('2d');
7 var width = context.canvas.width;
8 var height = context.canvas.height;
9 var lastX = width * Math.random();
10 var lastY = height * Math.random();
11 var hue = 0;
12 function line (){
13
14 context.save();
15 context.translate(width/2, height/2);
16 context.scale(0.9, 0.9);
17 context.translate(-width/2,-height/2);
18
19 context.beginPath();
20 context.lineWidth = 5 + Math.random() *10;
21 context.moveTo(lastX, lastY);
22 lastX = width * Math.random();
23 lastY = height * Math.random();
24
25 context.bezierCurveTo(width*Math.random(),height*Math.random(),width*Math.random(),height*Math.random(),lastX,lastY);
26
27 hue = hue + 10 *Math.random();
28 context.strokeStyle = 'hsl('+ hue +',50%,50%)';
29 context.shadowColor = 'white';
30 context.shadowBlur = 10;
31
32 context.stroke();
33 context.restore();
34 }
35 setInterval(line,100);
36 function background(){
37 context.fillStyle = 'rgba(0,0,0,0.1)';
38 context.fillRect(0,0, width, height)
39
40 }
41 setInterval(background, 100)
42 </script>
43 </body>
44 </html>
