How to make this funny thing?

Question

JavaScript

How hard is it to make this thing (gif) with help? Maybe there are some ready-made analogues?
And maybe there are some (? directories?) where you can find various interesting (? chips?) of a similar format?

Answer 1

When focusing on the input, use transform: scale to enlarge the image. The comrades do not have pupils in the picture (or you can cover the place where they should be initially with a white dot), they are superimposed by separate absolutely positioned elements. When the state of the input changes, we look at how many characters there are and add transform translate for the pupils. You can do this with mouse coordinates ( example ), it also turns out funny.
CodePen, there's a lot in there. Follow the picked pens section, subscribe to interesting people and you will get a portion of interesting chips every day.