<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