изображение линии, надеюсь все прояснит)
вот прорисовка для вертикальных и горизонтальных линий
но вот как быть с закруглением и непрямыми углами
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Line test</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$(function(){
var path = new Array(
{
direction: 'down',
blocks: 20,
},
{
direction: 'right',
blocks: 10,
},
{
direction: 'down',
blocks: 17,
},
{
direction: 'left',
blocks: 25,
},
{
direction: 'down',
blocks: 30,
},
{
direction: 'down',
blocks: 30,
}
);
var drawContainer = $('body');
var blockSize = 7, //px
startX = 300, //point
startY = 100, //poin
startDelay = 2000, //ms
drawSpeed = 40;
var blocks = new Array(),
lastX = startX, lastY = startY,
delay = startDelay,
lastIndex = 0;
//draw path
for(var i = 0; i < path.length; i++){
for(var f = 0; f < path[i].blocks; f++){
blocks[lastIndex] = $('<div />').css({
position: 'absolute',
top: lastY + 'px',
left: lastX + 'px',
opacity: 0,
width: blockSize + 'px',
height: blockSize + 'px',
background: '#000'
})
.delay(delay).animate({opacity: 1}, 200)
.appendTo(drawContainer);
lastIndex ++;
delay += drawSpeed;
switch(path[i].direction){
case 'down':
lastY += blockSize;
break;
case 'right':
lastX += blockSize;
break;
case 'left':
lastX -= blockSize;
break;
case 'up':
lastY -= blockSize;
break;
}
}
}
});
});
</script>
</body>
</html>