I've resisted posting my effort at a moving eyes animation, but my resolve has crumbled[1].

In an attempt to make this comment slightly less spammy, I think that it's easier to create this effect in a web page if the code makes good use of radial gradients. Both SVG and the 2D canvas API use a 'two circles' approach to defining the gradient (interactive demo here[2]); the CSS approach, however, seems a lot less intuitive to me[3] - can I assume there were good reasons why the CSS committee chose to do it this way?

[1] - https://codepen.io/kaliedarik/pen/XWgoLjE

[2] - https://scrawl-v8.rikweb.org.uk/demo/canvas-004.html

[3] - https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/ra...