.png)
A Bouncing Ball
Bounce Ver 0
This particular SVG document runs with the JavaScript inline which works and can be useful for small documents with minimal scripting, but can result in a more "cluttered" SVG file. Another advantage is that only one file needs to be downloaded from the website's server so the document will tend to load faster. The next document will be dependent on an external JavaScript file and so will the others as this will help us to make code that is reusable across many SVG documents.
As you can see, the "Ball" object simulates an "inelastic" collision with its container by reversing its direction of travel once its edge reaches the outer border of the black rectangle which represents the ball's container.
While the current animation works in a fairly realistic way, it has a number of limitations which will be easier to reveal and deal with once we add more interactivity to our simulation.