<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="800px" height="480px" viewBox="0 0 800 480" zoomAndPan="disable">

<script type="text/ecmascript"><![CDATA[

var FRAMERATE = 30.0;
var ball, p, v, g, e, f, r, t, h;

function init(e) {
	ball = document.getElementById("ball");
	h = parseInt(document.getElementsByTagName("svg")[0].getAttribute("height"));

	g = [0, -0.8];	
	p = [parseInt(ball.getAttribute("cx")), h - parseInt(ball.getAttribute("cy"))];
	v = [14, 8];
	els = 0.6;
	f = 0.9;
	r = parseInt(ball.getAttribute("r"));
	t = 0;

	window.setInterval(updateBall, 1000.0 / FRAMERATE);
}

function updateBall() {
	
	v[0] += g[0] * t;
	v[1] += g[1] * t;
	p[0] += v[0];
	p[1] += v[1];

	if (p[1] < r) {
		p[1] += r - p[1];
		v[1] = -v[1];
		v[1] -= els;
		v[0] *= f;
	}

	ball.setAttribute("cx", p[0]);
	ball.setAttribute("cy", h - p[1]);
	t++;
}

window.onload = init;

]]></script>

<circle id="ball" cx="0" cy="0" r="32" fill="#DC0020" />
<line x1="0" y1="480" x2="800" y2="480" stroke="#000000" stroke-width="1" />

</svg>