<!doctype html>
<head>
<style>
html,body{
height:100%;
margin:0;
//overflow:hidden;
}
body{
font-family:arial;
font-size:12px;
background:#000;
}
p{
margin:4px;
color:#0f0;
}
path{
animation-name:draw;
animation-duration:1s;
}
@keyframes draw{
from {stroke-dasharray:0,2000;}
to {stroke-dasharray:2000;}
}
button{
color:#0f0;
background:#000;
border:1px solid #0f0;
}
input{
margin:4px;
color:#0f0;
background:#000;
border:1px solid #0f0;
}
</style>
<title>Path generator</title>
</head>
<body>
<svg width="2000" height="500" onmousedown="myFunctionE(event)" id="mySVG2" onmousemove="myFunctionP(event)">
<path d="m0 500L2000 500" stroke-width="2" stroke="#0f0" fill="none"/>
</svg>
<input/>
<p id="clicn">number of clicks : 0</p>
<p id="posi">X : 0 Y : 0</p>
<p id="result">current path coordinates : n/a</p>
<p id="fullp">full path : n/a</p>
<p id="butts"></p>
<script>
var coorXY=[];
var hcoorXY=[];
var firstXY=[];
var i=1;
function myFunctionE(){
var x1=event.clientX;
var y1=event.clientY;
var circ1=document.createElementNS(mySVG2.namespaceURI,"circle");
circ1.setAttributeNS(null,"cx",x1);
circ1.setAttributeNS(null,"cy",y1);
circ1.setAttributeNS(null,"r","2");
circ1.setAttributeNS(null,"fill","#ccc");
mySVG2.appendChild(circ1);
if(i>1){
var path1=document.createElementNS(mySVG2.namespaceURI,"path");
path1.setAttributeNS(null,"d","m"+x1+" "+y1+"L"+coorXY+"");
path1.setAttributeNS(null,"stroke-width","1");
path1.setAttributeNS(null,"stroke","#ccc");
path1.setAttributeNS(null,"fill","none");
mySVG2.appendChild(path1);
document.getElementById("result").innerHTML="path coordinates : m"+x1+" "+y1+"L"+coorXY;
}
document.getElementById("clicn").innerHTML="number of clicks : "+i;
i++;
if(i>2){
document.getElementById("butts").innerHTML="<button onclick=\"myFunctionGO()\">Launch</button> <button onclick=\"myFunctionRE()\">Reset</button>";
hcoorXY.push(x1+" "+y1);
document.getElementById("fullp").innerHTML="full path : "+firstXY+hcoorXY;
coorXY.shift();
}
coorXY.push(x1+" "+y1);
if(i==2){
firstXY.push("m"+x1+" "+y1+"L");
}}
function myFunctionP(){
var px=event.clientX;
var py=event.clientY;
document.getElementById("posi").innerHTML="X : "+px+" Y : "+py;
}
function myFunctionGO(){
var circ2=document.createElementNS(mySVG2.namespaceURI,"circle");
circ2.setAttributeNS(null,"cx","0");
circ2.setAttributeNS(null,"cy","0");
circ2.setAttributeNS(null,"r","4");
circ2.setAttributeNS(null,"fill","#0f0");
var anim1=document.createElementNS(mySVG2.namespaceURI,"animateMotion");
anim1.setAttributeNS(null,"path",firstXY+hcoorXY);
anim1.setAttributeNS(null,"begin","0s");
anim1.setAttributeNS(null,"dur",i+"s");
anim1.setAttributeNS(null,"repeatCount","indefinite");
anim1.setAttributeNS(null,"rotate","auto");
circ2.appendChild(anim1);
mySVG2.appendChild(circ2);
}
function myFunctionRE(){
coorXY=[];
hcoorXY=[];
firstXY=[];
i=1;
document.getElementById("clicn").innerHTML="number of clicks : 0";
document.getElementById("posi").innerHTML="X : 0 Y : 0";
document.getElementById("result").innerHTML="path coordinates : n/a";
document.getElementById("fullp").innerHTML="full path : n/a";
document.getElementById("butts").innerHTML="";
document.getElementById("mySVG2").innerHTML="<path d=\"m0 500L2000 500\" stroke-width=\"2\" stroke=\"#0f0\" fill=\"none\"/>";
}
</script>
</body>
