# Then & now: redrawing our 2012 CSS art in 2026 > In 2012 we drew six superheroes, R2-D2 and a Game & Watch in hand-written CSS3. Fourteen years later we drew all eight again, twice: once in HTML & CSS, once in 3D. - Published: 2026-09-28 - By: Vuild - Tags: Labs, CSS, 3D In 2012 CSS3 was new enough to feel like a trick. Gradients, rounded corners and transforms had only just landed in every browser, and we wanted to know how far they would go. So we drew with them: a series of superheroes (Superman, Batman, Wolverine, Spider-Man, Iron Man and Hulk), then R2-D2, then a Donkey Kong Jr. Game & Watch. No images, no canvas, just boxes, borders and gradients stacked until they looked like something. Each hero took about a day. R2-D2 took four. The Game & Watch took a week, because we couldn't resist making it responsive. This year we went back to all eight. The brief to ourselves was simple: same subjects, fourteen years apart, and no nostalgia discount. Each one was remade twice, in two very different mediums, and you can see all three versions side by side on [Then & now](/remakes). ## Two remakes, two rulebooks **Rendered** is the direct descendant of the originals: pure HTML & CSS, still no images, no SVG and no canvas. What has changed is everything around the rules. Modern CSS gives us layered gradients with real colour mixing, `clip-path` for organic silhouettes, blend modes, filters for soft light and custom properties that let one value drive a whole character. The 2012 heroes were flat cut-outs. The 2026 ones have sculpted light, textured suits and weather. **3D** throws the rulebook out. Each piece is sculpted in code with Blender's Python API, exported as a single model file and lit live in the browser with three.js. You can drag to turn them, and every one does something when you hold down. ::: pull Same subjects, fourteen years apart, and no nostalgia discount. ::: ## Every piece does something A drawing you can only look at felt like a missed chance, so each remake has one idea you can play with: - Superman's heat vision follows your pointer and burns where it lands. - Batman waits on a rooftop in the rain; hold down and the bat-signal lights the clouds. - Wolverine's claws come out, with the sound effect to match. - Spider-Man fires a web. - Iron Man charges his repulsor and unibeam, and his faceplate lifts to show Tony underneath. - Hulk stays calm until you hold down, then he roars. - R2-D2 beeps, and in 3D he projects a hologram. - The Game & Watch is playable: one LCD game in three devices, the original Wide Screen, a Game Boy and a Mini Classic keyring. These are small things, but they are the difference between an illustration and a piece of software, and software is what we make. ## What fourteen years changed The honest answer is: less about CSS than about how we work. In 2012 every gradient was a guess, refreshed and nudged until it looked right. In 2026 we could see a detail was wrong, describe why, and fix the cause. When Spider-Man's lenses looked off-centre, the reason wasn't the drawing: one lens was a mirrored copy of the other, flipped around an off-centre pivot. The fix was one number. The 3D pieces taught the same lesson at a larger scale. Sculpting a face with nothing but code is hard, and our first heads were rough. Rather than fight it, we started from Blender Studio's free, CC0 human base meshes and reshaped them by script into each character. Hands went the same way. We wrote more about that process in [Sculpting superheroes in code with Blender](/blog/coded-heroes). ## A museum shelf for the lot Eight pieces in two mediums is a lot to take in, so the top of [Then & now](/remakes) is a museum shelf: all eight 3D pieces as small statues on a slowly turning turntable, each under its own spotlight. The statues are lightweight versions of the full models, loaded only once the page is idle, so the shelf costs almost nothing before you scroll. Click one and you jump straight to its row, where the 2012 original sits beside both remakes. There is also a secret. If you know the code, try it. ## Why bother Labs has always been where we try things before we need them. The 2012 heroes taught us what CSS could do years before we used those techniques on client work. The 2026 remakes did the same for procedural 3D, real-time lighting and building interactive pieces that still load fast on a phone. The next time a client needs something that moves, we will already know where the edges are. Have a look at the [whole set](/remakes), or start with the [3D Superman](/superman-3d) and hold down. HTML version: https://vuild.com/blog/css-remakes --- Vuild is an independent design, product, engineering and Super Intelligence studio, independent since 2012. It has shipped 100+ products with 1M+ installs and 1B+ views, for clients from Y Combinator startups to the United Nations. Contact: hello@vuild.com ยท https://vuild.com/contact