1. The example starts with a call to example.com/cat.html
  2. The client (browser) makes a GET request for the resource (cat.html)
  3. The webserver serves the GET request: it sends a response with code 200 (“success”) and cat.html as the payload.
  4. The browser parses the HTML page and tries to display it. The page contains CSS and an image, so the browser requests each of these with new GET requests.
  5. The server responds to each request with code 200 (“success”) and the requested file as the payload.
  6. The CSS arrives and is applied (the page goes pink). The image arrives and is displayed (the cat appears).
An interactive version of this diagram is available with JavaScript enabled.

This is an example of an animated SVG diagram controlled by step/run/stop buttons. KeyshapeDiagram is a wee JavaScript program which adds the buttons and manages the presentation.

Everything is inline in this example: no external calls being made. That is: stylesheets, SVG diagram, and JavaScript is all in <style> <svg> and <script> tags. This means, at a push, you can paste content like this into a Moodle page. (It gets a bit more complex if you want multiple animations on the same page this way, but it's doable).

This example differs from this similar one by the SVG having been exported from Keyshape with embedded-in-the-SVG (not external) Keyshape library.