There is a very cool talk by Mathieu Henri in which he shows how to code simple animation in your browser using Javascript and a little bit of math.
from IPython.display import YouTubeVideo
YouTubeVideo('16oLi1kvLHs')
A first example is the HTML below. What it does is:
%%html
<style>
#b {
position: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, #456, #200);
}
</style>
<div id='drawdiv'>
<canvas id='b'>
</div>
<script>
c=b.getContext('2d');
function update() {
requestAnimationFrame(update);
// init
if (!window.time) {
frame = 0;
time = 1/60;
}
else if (frame < 20000) {
frame++;
time += 1/60
// render visual
H = b.height = 512;
W = b.width = 0 | H * innerWidth / innerHeight;
c.translate(W/2, H/2);
c.strokeStyle = '#fff';
c.strokeText([W, H, frame], 0, 0);
}
}
update();
</script>
A more elaborate example would be to show something that is like what Mathieu showed in the talk: drawing some sort of vines.