Super Mario World made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =)
In this post, I’ll be brief. Allow me to get straight to the point.
For comparison purposes, this is the original Super Mario World, for Super Nintendo:
Disclaimer: Super Mario World.css is not a playable game, it’s “just” an animation.
If you’re curious to know how it was made, the code is well commented.
Basically, 99.99% of what you’ll see is made with CSS gradients, including the forest, bushes and Mario himself.
It works fine in Chrome 64 on MacOS. Firefox runs it properly too, but a bit slowly. In Safari, unfortunately, it simply doesn’t work at all, and I’m out of patience and time to debug it for now. I didn’t test it with other browsers or devices.
And here’s the pen:
Update. New experiment released!: Hey, after seeing this post, you may want to take a look at my new experiment here.
This is how the sprite data looks in Atom, by using the atom-pigments package. =)