idk Logo Animation

It has been a while since my last post, but today I want to walk through the process of creating a logo animation for idk. In this brief post, I share the steps I took to bring the logo to life.

Preparing the Grid

First, I represented the logo on a grid and rendered it with Python and the Pillow library. The animation begins with the grid elements scattered, then moves each one into place to form the logo. Although I could have automated the arrangement, crafting it manually was more intuitive.

Enhancing Animation Smoothness

The first version looked jittery because it only captured snapshots of the changing grid. To smooth it out, I calculated the differences between each grid and the next, then used a for loop to interpolate the elements' positions across several frames.

Final Touches

At this stage, the animation had approximately 200 frames and a limited colour palette, making it a good candidate for optimisation. An optimiser reduced the file size from 122.7 kB to 13.2 kB. The colours changed slightly, but that was an acceptable trade-off for such a large reduction. To finish, I set the animation to the correct size and resolved its transparency issues by placing it on a white background.

Thanks for reading.