A small test of JavaScript animations on this blog. Meet the Giraffoxy — part fox, part giraffe — out for a stroll. Click (or tap) the canvas to make it hop.

Drawn on a <canvas> with plain JavaScript — no libraries.

How it’s made

The script is a plain .js file sitting in this post’s folder, next to index.md:

content/posts/giraffoxy-wanders/
├── index.md
└── wander.js

and the post embeds it with one line:

{{< animation src="wander.js" height="320" >}}

Inside wander.js, the script finds its canvas like this:

const canvas = document.getElementById(document.currentScript.dataset.canvas);

It pauses when scrolled off-screen, and if your system is set to reduce motion, it draws a single still frame instead.