draw grid, vẽ grid (ok)

https://codepen.io/bunnypi04/pen/MWayaam

<svg>
<path d="M100,300
        L100,200
        A50,50 0 0,1 200,200
        A50,50 0 0,1 300,200
        L300,300"
  stroke="black" fill="none"/>
<circle cx="425" cy="225" r="75" stroke="black" fill="none"/>
<circle cx="625" cy="225" r="75" stroke="black" fill="none"/>
<path d="M750,300
        L750,200
        A50,50 0 0,1 850,200
        L850,300"
  stroke="black" fill="none"/>
</svg>

body {
    padding: 0;
    margin: 0;
}
.grid {
    border: 1px solid #ccc;
    border-width: 1px 0 0 1px;
}

.grid div {
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    float: left;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 600px;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
path, circle {
   stroke-width: 10px;
   stroke: black;
   fill: none;
   stroke-dasharray: 800;
   stroke-dashoffset: 800;
   animation: draw 5s infinite linear;
}

//draw grid
function createGrid(size) {
    var ratioW = Math.floor($(window).width()/size),
        ratioH = Math.floor($(window).height()/size);
    
    var parent = $('<div />', {
        class: 'grid', 
        width: ratioW  * size, 
        height: ratioH  * size
    }).addClass('grid').appendTo('body');

    for (var i = 0; i < ratioH; i++) {
        for(var p = 0; p < ratioW; p++){
            $('<div />', {
                width: size - 1, 
                height: size - 1
            }).appendTo(parent);
        }
    }
}

createGrid(50); //grid width = 50px