Small and simple utility library to draw lines just using javascript and HTML Document Object Model. No JQuery needed

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <title>div-lines.js</title>
    <style type="text/css">
    
        body {
            overflow: hidden;
            background-image: url("https://npmcdn.com/div-lines/demo/bg-005.gif");
        }
    
    </style>
  </head>

  <body>
        <div id="mainContainer" class="mainContainer">
            <div id="line" class="line extra"></div>
        </div>
        <script src="https://npmcdn.com/div-lines/dist/div-lines.min.js"></script>
        <script>
            // (idString,x1,y1,x2,y2,weight,color,opacity, roundBorder, longSombra, colSombra);
            dljs.linex(null,0  ,0  ,50 ,50 , 1, "#ff0000",0.8, true, 5, "#ff00ff"); 
            dljs.linex(null,50 ,50 ,100,50 , 1, "#ff0000",0.8, true, 5, "#ff00ff");
            dljs.linex(null,100,50 ,150,0  , 1, "#ff0000",0.8, true, 5, "#ff00ff");
            dljs.linex(null,150,0  ,250,100, 1, "#ff0000",0.8, true, 5, "#ff00ff");
            dljs.linex(null,250,100,250,200, 1, "#ff0000",0.8, true, 5, "#ff00ff");
            dljs.linex(null,250,200,300,200, 1, "#ff0000",0.8, true, 5, "#ff00ff");
            dljs.linex(null,300,200,300,50 , 1, "#ff0000",0.8, true, 5, "#ff00ff" );
            dljs.linex(null,300,50 ,250,0  , 1, "#ff0000",0.8, true, 5, "#ff00ff" );
            dljs.linex(null,250,0  ,200,50 , 1, "#ff0000",0.8, true, 5, "#ff00ff" );
            dljs.linex(null,100,100,400,300,10);
            dljs.linex(null,400,300,400,0  ,20,"#0000ff",0.5);
            dljs.linex(null,500,100,600,200,20,"#00ff00",0.5);
            dljs.linex(null,50 ,50 ,600,200,40,"#ffff00",0.5,true,10,"#00ffff");


            var draw = {"id":null,"name":null,"path":[{"id":null,"name":null,"vertex":[{"id":1507989162235,"x":200,"y":200},{"id":1507989163484,"x":200,"y":290},{"id":1507989164515,"x":210,"y":300},{"id":1507989165987,"x":250,"y":300},{"id":1507989170523,"x":270,"y":290},{"id":1507989172563,"x":280,"y":260},{"id":1507989175571,"x":280,"y":290},{"id":1507989176947,"x":290,"y":300},{"id":1507989178154,"x":310,"y":300},{"id":1507989179475,"x":310,"y":270},{"id":1507989181643,"x":330,"y":250},{"id":1507989182690,"x":350,"y":250},{"id":1507989186987,"x":350,"y":300},{"id":1507989189683,"x":370,"y":280},{"id":1507989191211,"x":400,"y":280},{"id":1507989193714,"x":410,"y":260},{"id":1507989195059,"x":390,"y":250},{"id":1507989197475,"x":370,"y":280},{"id":1507989199419,"x":400,"y":300},{"id":1507989206763,"x":430,"y":300},{"id":1507989208554,"x":450,"y":270},{"id":1507989210003,"x":440,"y":250},{"id":1507989211466,"x":460,"y":260},{"id":1507989214546,"x":480,"y":290},{"id":1507989215922,"x":470,"y":300}]}]};

            var x_ofset = -100;
            var y_ofset = -150;
            for (var i = 0; i < draw.path.length; i++) {
                for (var j = 0; j < draw.path[i].vertex.length-1; j++) {
                    var previousPoint = draw.path[0].vertex[j],
                        a = previousPoint.x + x_ofset,
                        b = previousPoint.y + y_ofset,
                        c = draw.path[0].vertex[j+1].x + x_ofset,
                        d = draw.path[0].vertex[j+1].y + y_ofset;

                    dljs.linex(null,a,b,c,d , 3, "#cc0090",1, true, 10, "#ff00ff" );
                }
            }

        </script>
  </body>

</html>

// Code goes here

/* Styles go here */