SVG Demonstration 3
Code
<svg width="200" height="200">
<line id="line1" x1="0" y1="0" x2="200" y2="200" style="stroke:#008000;stroke-width:2;" />
</svg>
<script>
function move() {
var line = document.getElementById('line1');
var x1 = line.getAttribute('x1');
var y1 = line.getAttribute('y1');
// move start of line clockwise
if (y1 == 0) {
if (x1 < 199) x1++;
else y1++;
} else if (y1 == 199) {
if (x1 > 0) x1--;
else y1--;
} else if (x1 == 0) {
if (y1 > 0) y1--;
else x1++;
} else { // hopefully x1 == 199
if (y1 < 199) y1++;
else x1--;
}
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', 199 - x1);
line.setAttribute('y2', 199 - y1);
setTimeout(move, 10);
}
window.onload = move;
</script>