html
html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<svg>
<circle cx="75" cy="95" r="60"/>
<path id = "robot" d = ""/>
</svg>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
svg {
width: 1000px;
hight: 1000px;
}
circle {
fill: #00F;
}
#robot {
fill: #FF0;
stroke: #000;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload = function(){
var robo = document.getElementById("robot");
setInterval(add, 500);
var pth = ['M 60 50 ','h 30 ','v 20 ','h -10 ','v 10 ','h 20 ','v -20 ','h 10 ','v 30 ','h -30 ","v 10 ","h 10 ","v 40 ","h -10 ","v -30 ','h -10 ','v 30 ','h -10 ','v -40 ','h 10 ','v -10 ','h -30 ','v -30 ','h 10 ','v 20 ','h 20 ','v -10 ','h -10 ','Z']
var i = 0;
var result = "";
function add(){
if(i < pth.length){
result += pth[i];
// setAttribute('result', d);
robo.d = result;
++i;
}
else{
clearInterval(add);
}
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run