This is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/

Very nice!

I changed it a little bit to optimise rendering just in case you don't know about 'requestAnimationFrame()' (https://developer.mozilla.org/en-US/docs/Web/API/window/requ...):

https://jsfiddle.net/65q7c5to/

It's using setInterval on purpose, because with requestAnimationFrame the effect is a bit too fast.

Works fine on chrome, but it seems too fast on firefox.

What do all the context transformation lines do in this example? It seems to work just as well with clearRect on its own.

There's only one such line. In general it's a good idea to reset the transform before clearing as the (0, 0, w, h) rectangle may not cover the whole canvas anymore. In this toy example there obviously isn't another transform so it's without function.

Wonderfurl! It makes the kid see how a small algorithm saves time AND produces almost the same results as hand drawn animation. I have to try this myself with my own kids.

Absolutely! Assuming your 5 year old is some kind of savant. Otherwise, I can't imagine a kid actually understanding what is going on with a script like this.

This is great. Thank you both for these fiddles. I've been doing a lot of SVG DOM stuff. Mostly tied to maps. I'm excited to try this out.

That's true. There's so much randomness in there that every render will likely be unique - every so slightly different from the previous frame.

Reminds me of the art used in yoshi story. Awesome!

or Ed, Edd n Eddy cartoon :)

Hahahahaha, nice one!