Every single image, effect and filter except the original cat picture (see below) is generated using the image of a cat. No other asset is used.

Yep, that background is just the same cat. There are no gradients, no images generated with some collage technique, no painting individual pixels. Just the kittycat.

How?

Turns out that there exists a somewhat underused feature on HMTL. That feature is the capability to define and use SVG filters. Turns out that you can use some very interesting elements such as feTurbulence or feGaussianBlur in an <svg><filter id="my_filter">...</filter></svg>in HTML and apply those filters to images and elements. These filters use the original cat image to generate new pixels. For example, they derive the cat image as a seed to generate pixels for some turbulence in the background. Both the smoke and the squares in the background are derived from the cat’s pixels. Just applying filters in an interesting way can give very interesting results.

The ship in the room

The “Ship of Theseus” paradox is a thought experiment about whether an object which has had all of its original components replaced remains the same object.

In other words, if you keep repairing a ship, until not a single nail from the original ship is unreplaced, is it the same ship? If we put 16 filters over a cat image, is it still the same cat image? Does being a cat image imply that a common person can identify a cat in that image? Do we take into account the origin or the final product?

It’s pretty interesting to ask ourselves, even if the background is formed from a cat, is it still a cat? Probably not, but I wanted to experiment with SVG filters, because they’re cool af ✨

Yep, those moving titles are also generated using the same technique. They’re also cat