ラインアートを背景にする

html5にてCanvasがサポートされました。CanvasとJavaScriptで アニメーションを実現できます。アニーメーションをWEBの背景に出来ます。 あちこちのサイトを参照しサンプルを作ってみました。 
<html>
    <head>
        <title>
            Line Art
        </title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="lineArt.css">
        <script type="text/javascript" src="lineArt.js"></script>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <section id="body">

            ここにコンテンツを書く
            
            　　．
            　　．
            　　．
            　　．
            


        </section> 
    </body>
</html>

参照サイト

背景をCanvasにする

https://qiita.com/mohayonao/items/e96e68aedc04a37f0c6d 
[lineArt.css]
#canvas {
	display: block;
    position:fixed;    top:0; left:0; width:100%; height: 100%;  
}
#body   { position:absolute; top:20; left:20; color: #FFF;}

ラインアート

ラインアートは http://jsdo.it/overflowfl/uqxo ここ 
[lineArt.js]

window.onload = function(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    var W = window.innerWidth;
    var H = window.innerHeight;
    var W2 = W * 0.5;           // LINEを描画する範囲（最下）
    var H2 = H * 0.4;           //                   （右端)
    canvas.width = W;
    canvas.height = H;
    
    var particles = [];
    for(var i = 0; i < 4; i++){             // 頂点の数
        particles.push(new particle());
    }
    
    function particle(){
        //location on the canvas
        this.location = {
            x: Math.random()*W2, y: Math.random()*H2
        };
        this.radius = 0;
        this.speed = 2;
        this.count = 0;
        this.random = 0;
        this.angle = Math.random()*360;
        this.rgba = randomColor();
    }

    function randomColor(){
        var r = Math.round(Math.random()*255);
        var g = Math.round(Math.random()*255);
        var b = Math.round(Math.random()*255);
        var a = Math.random();
        return "rgba("+r+", "+g+", "+b+", "+a+")";
    }    
    function draw(){
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "rgba(20, 20, 20, 0.2)";
        ctx.fillRect(0, 0, W, H);
        ctx.globalCompositeOperation = "lighter";
        
        for(var i = 0; i < particles.length; i++){
            var p = particles[i];
            p.count = (p.count + 1) % (Math.round(Math.random()*5) + 8);
            if(p.count == 0){
                p.random = Math.random()*8 - 4;
                p.rgba =randomColor();
            }
            ctx.fillStyle = "black";
            ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
            
            for(var n = i+1; n < particles.length; n++){
                var p2 = particles[n];

                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.moveTo(p.location.x, p.location.y);
                ctx.lineTo(p2.location.x, p2.location.y);
                ctx.strokeStyle = p.rgba;
                ctx.stroke();
            }
            
            p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180) + p.random;
            p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180) + p.random;
            
            if(p.location.x < 0) {
                p.location.x = 0;
                if(p.angle<180){
                    p.angle = 180 - p.angle;
                } else {
                    p.angle = 360 - (p.angle - 180);
                }
            }
            if(p.location.x > W2) {
                p.location.x = W2;
                if(p.angle<180){
                    p.angle = 180 - p.angle;
                } else {
                    p.angle = 180 + (360 - p.angle);
                }
            }
            if(p.location.y < 0) {
                p.location.y = 0;
                if(p.angle<180){
                    p.angle = 180 - p.angle;
                } else {
                    p.angle = 180 + (180 - p.angle);
                }
            }
            if(p.location.y > H2) {
                p.location.y = H2;
                if(p.angle>270){
                    p.angle = 360 - p.angle;
                } else {
                    p.angle = 180 - (p.angle - 180);
                }
            }
        }
    }
    
    setInterval(draw, 50);
};