Super Mario World made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =)

It’s me, Mario!

In this post, I’ll be brief. Allow me to get straight to the point.

This GIF on the left shows a short Super Mario World animation made purely with CSS. No embedded or external images were used. No JavaScript too. Only CSS (with Stylus as preprocessor) and this tiny HTML:

<main class="game">
  <div class="game__background"></div>
  <div class="game__foreground">
    <div class="foreground__mario"></div>
    <div class="foreground__ground"></div>
  </div>
</main>

For comparison purposes, this is the original Super Mario World, for Super Nintendo:

The original game

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:

Super Mario World.css

Update. New experiment released!: Hey, after seeing this post, you may want to take a look at my new experiment here.

Bonus:

This is how the sprite data looks in Atom, by using the atom-pigments package. =)