frontpage.
newsnewestaskshowjobs

Made with ♥ by @iamnishanth

Open Source @Github

fp.

Open in hackernews

Show HN: A CSS-Only Terrain Generator

https://terra.layoutit.com
371•rofko•3mo ago

Comments

jimmydin7•3mo ago
looks sick! great job :)
mpeg•3mo ago
Reminds me of Populous!

Very cool

johnh-hn•3mo ago
I just came here to say the same thing. The raise and lower tools in particular reminded me of it.

For anyone who hasn't heard of it before: https://en.wikipedia.org/wiki/Populous_(video_game)

dylan604•3mo ago
You guys have sent me down memory lane. Hopefully, I don't forget when I have free time to search, but hopefully I can find this to play in an emulator somewhere. This was the very first game I ever bought even though I didn't have an Amiga but had one that was very accessible.

edit: couldn't wait. did the search. it's very much available to play online. hello rabbit hole...

johnh-hn•3mo ago
Just in case you never came across it, I think the second game is much better than the first one. Enjoy the nostalgia trip!
linsomniac•3mo ago
Do tell, I've been wanting to play Populous again for a few years...
dylan604•3mo ago
dosbox top result in search
rofko•3mo ago
Thank you! Populous and Transport Tycoon were two big inspirations for sure :)
johnh-hn•3mo ago
You nailed it. Well done!
drcursor•3mo ago
Next step Populous in only CSS + JS
chubs•3mo ago
Also reminded me a lot of simcity 2000. Congrats, it's very neat!
RugnirViking•3mo ago
Really reminds me of openttd, especially the sandy border around the water

Looks really cool and runs great on my phone.

Seems like there's some kind of rendering bug in the corners sometimes causing the walls to intersect the grass

cluckindan•3mo ago
Nice! Now do collision checks ;)
all2•3mo ago
In CSS?
cluckindan•3mo ago
Yes.
julius-fx•3mo ago
This is incredible - looks like SimCity 2000.
lloydatkinson•3mo ago
Does it? All the tiles are usually a yellow brown aren’t they? 3000 has green land
neogodless•3mo ago
So funny - I thought the same as the first comment. But yeah memory is a funny thing.

https://kagi.com/proxy/sim-city-2000.png?c=zBh1SYcmKrHnLf7qc...

https://kagi.com/proxy/00001307.jpg?c=vxNARhwMwSpmnHAfYQrnRr...

mikepurvis•3mo ago
The colouring is brown for SC2000, but the geometry is basically identical; I definitely got the same energy from it.
petepete•3mo ago
While close to SC2000, it's much closer to Transport Tycoon (OpenTTD).

https://www.openttd.org/screenshots

forthwall•3mo ago
Wow this really feels like roller coaster tycoon!!! (I can see lots of people refer to this to their favorite sim game though)

Great work!

andruc•3mo ago
Funny, my mind went to OpenTTD
mig39•3mo ago
Both Rollercoaster Tycoon and Transport Tycoon Deluxe (which lives on in openTTD) are by the same author, and use the same engine :-)
lawlessone•3mo ago
Chris Sawyer, he made them with a tiny magnet that he used to write the games directly to a hard drive.
brendoelfrendo•3mo ago
I once heard he tickled a butterfly in Brazil to cause a cloud in the UK that diverted a cosmic ray onto his hard drive in the exact right spot to flip the required bit.
hulium•3mo ago
The biome button graphics are taken from the OpenTTD main menu.
Igrom•3mo ago
For me, "Briefing" from Ace Combat 2 played back in my head straight away.

https://youtu.be/5uPVGs7bq3s?t=8

devmor•3mo ago
Reminded me quite a bit of Populous[1] as well.

1. https://en.wikipedia.org/wiki/Populous_(video_game)

elyobo•3mo ago
Came to say this!
worldai•3mo ago
This is exactly what I thought of
yreg•3mo ago
I really miss these building games that used an isometric grid. RC Tycoon, Zoo Tycoon, Sim City, TTD, …

Yes, it's less realistic, but it is so pleasant to work with. Everything you build aligns perfectly and if you want, you can neatly fill the entire map.

In comparison, (even with many mods) my Cities Skylines or Planet Coaster creations never look quite right. Building the roads and paths is always awkward and frustrating.

(I've commented this before.)

accrual•3mo ago
Starcraft and The Sims 1 as well! Games that would let one rotate the isometric view once blew my mind, it was like going from 2D to 3D.
qingcharles•3mo ago
As someone who wrote one of those 2D-ish isometric games in the 90s, it was hell. All the problems with trying to render the tiles properly and figure out what tile the user was clicking on when some tiles are semi-transparent etc. The artists need medals though for creating amazing levels with tiny palettes of pieces to work from.

We made it especially hard on ourselves by having 3D characters interact with the 2D tiles:

https://www.youtube.com/watch?v=9UOYps_3eM0

I absolutely adore the look of isometric, though.

lawlessone•3mo ago
I like it's also really 3d, while looking like older 2.5d games.
robertheadley•3mo ago
This is really cool.
w4yai•3mo ago
I got some rendering issues, but otherwise very cool !

https://i.imgur.com/qT6ozyh.png

Firefox 144.0.2, Windows

rofko•3mo ago
Thanks for the report! Are you using a dark mode extension by any chance? I’ve seen that happen with Dark Reader in Chrome.
cmiller1•3mo ago
Lots of javascript for a "css-only" tool. Looks like just the rendering is css-only.
MarsIronPI•3mo ago
Yep. Can confirm this does not work with JS disabled. I'm disappointed by the misleading title.
shermantanktop•3mo ago
is it a Generator for CSS-Only Terrain? or a CSS-Only Generator which creates Terrain?

We need PEMDAS for English.

Elfener•3mo ago
Let's use sexpr?

actual meaning -> ((CSS-Only Terrain) Generator)

incorrect interpretation -> (CSS-Only (Terrain Generator))

shermantanktop•3mo ago
maybe RPN?

actual meaning -> CSS-Only Terrain + Generator +

incorrect interpretation -> CSS-Only + Terrain Generator +

Really we may need BNF here

MarsIronPI•3mo ago
Loglan anyone?
embedding-shape•3mo ago
Not to mention of all of those pesky HTML tags and images, clearly not CSS-only, what a fraud.
cmiller1•3mo ago
"CSS-only" colloquially tends to mean HTML and CSS without Javascript, sometimes without images.
DonaldPShimoda•3mo ago
The tone of the parent comment suggests they were writing in jest and are aware that "CSS-only" includes HTML.
bogwog•3mo ago
I guess it'd be more accurate to call it a "Generator for CSS-Only Terrain", as the generator itself is not CSS-only.
tantalor•3mo ago
It's a "(CSS-only Terrain) Generator", not a "CSS-only (Terrain Generator)"
91bananas•3mo ago
https://xkcd.com/37/
jonahx•3mo ago
You can open up your terrain in codepen with nothing but CSS/HTML, and it renders fine. It's just not interactive / draggable anymore.

So the JS is only being used, essentially, as a nice UI for configuring your terrain and the camera angle from which it's viewed.

This is still an incredible feat.

ryukoposting•3mo ago
Dark Reader mutilates the rendered output, but only certain tiles. No clear pattern as to what tiles get mangled. Peculiar.
OldGreenYodaGPT•3mo ago
Crazy that vibe coding can make things like this now! 2026 going to be crazy! There is no AI bubble
stefs•3mo ago
1. what's a layou tit?

2. does it sometimes raise / lower by 2 units?

3. the "flatten" tool is missing.

EGreg•3mo ago
Can someone please reimplement something like Warcraft 2 on a mobile web device?

It would be a hit, I’m telling you. Even from 1995.

Some people are still playing it 30 years later, obsessively.

And myth ii by Bungie is a classic too

mock-possum•3mo ago
The controls would take some serious reworking to make it work on mobile - I could see adding a ‘pause’ feature to give you time to scrub your fingers all over the screen to issue all your unit and build orders, performant pinch to zoom would nearly negate the need for a mini map, lots of reworked GUI for building stuff and managing workers
EGreg•3mo ago
Anyone made a real-time-strategy engine for tiled games on mobile?
o11c•3mo ago
Stratagus has an android port at least ...
EGreg•3mo ago
Oh yes I remembered, wargus exists!

Also Microsoft claims this after buying Blizzard:

Through great teams and great technology, Microsoft and Activision Blizzard will empower players to enjoy the most-immersive franchises, like “Halo” and “Warcraft,” virtually anywhere they want.

https://news.microsoft.com/source/2022/01/18/microsoft-to-ac...

iagorodriguez•3mo ago
Amazing job by an amazing developer!
ModernMech•3mo ago
This thing is killing my CPU, what's the actual bottleneck here for CSS? Is it the number of elements visible and rendered at once? Is it the calculation engine backing CSS is super slow? Or just that most of the work is being done on the CPU it seems (on my machine, rotating around the map, my integrated GPU goes to 20% but CPU stays around 40-50%).
kachapopopow•3mo ago
it's effectively a cpu 'renderer' with gpu painter
paulbjensen•3mo ago
Really cool, especially when I realised you could rotate the terrain and do some zooming as well.
hersko•3mo ago
This is super cool! Wonder how hard it would be to use with an RTS game.
bodge5000•3mo ago
I've used a few terrain generators before but I think this one might be my favourite. Obviously the fact its a "CSS only" demo project restricts things a bit, but its got enough going for it regardless.

It actually comes at a really good time for me, I'm currently trying to make the transition from 2d game dev to 3d and things like this are really helpful.

nefarious_ends•3mo ago
Very cool! Do you think it’s possible to do lakes and waterfalls?
rofko•3mo ago
Definitely! I'm planning for more landscape features for next versions. I think rivers will be a great addition, and waterfalls/rapids sound really interesting too. In the end it's a matter of adding a few classes and designing some sprites.
throwaway2037•3mo ago
It is giving Sega Genesis "Populous" vibes.
em3rgent0rdr•3mo ago
Impressive, but there is a noticeable lag after modifying the terrain or moving the camera. Is there a way to know if the browser is using the GPU or CPU for rendering, and is there are way to see the milliseconds per frame?
bob1029•3mo ago
It looks like a layout/style/composition issue with the browser engine.

In Safari I'm seeing 91% CPU time on paint, 6% on layout, 2% on styles. It looks like it's taking somewhere between 100-200ms on my machine to chunk through a state change each time.

> Is there a way to know if the browser is using the GPU or CPU for rendering, and is there are way to see the milliseconds per frame?

For Safari, you would go to the Web Inspector and navigate to the Timelines tab. Chrome has a similar thing.

worldai•3mo ago
Impressive work
senfiaj•3mo ago
When I turn off JS, it shows a loader instead of the terrain. Is this really CSS-Only? I mean it's still a high achievement even with JS, but was expecting it would also work without JS. This one, for example, truly works without JS https://benjaminaster.com/css-minecraft/ .
arbll•3mo ago
I'm assuming it's the render engine that is in pure CSS. You could display a static map in CSS but things like the tools to modify the terrain definitely need JS.
psygn89•3mo ago
You might not need it using the new :has() and different inputs as modifiers. Though that's a lot of :has() and probably would kill performance.
nightpool•3mo ago
GP linked an example of a similar project that allowed you to modify the terrain without any JS at all
thih9•3mo ago
I wanted to check if your assumption is correct but I couldn’t find the source code.

Why do you think the renderer is pure css and not e.g. mostly css?

embedding-shape•3mo ago
The top right button has a "Download code" which gives you a .zip file. That .zip file doesn't have any JS in it, and renders the terrain just like in the online editor, except you can turn off JS and it still works.

Edit: someone else wrote basically the same an hour ago: https://news.ycombinator.com/item?id=45814791

thih9•3mo ago
Looks like it’s a “(css-only terrain) generator” - a generator that lets the user create and download a css only terrain.

As opposed to a “css-only (terrain generator)” - a terrain creation studio built with css only.

decimaldesign•3mo ago
I think what's intended is that the completed and downloaded solution doesn't require any javascript.

Build something then hit the Download Code button - that packaged HTML solution doesn't require any javascript to render locally.

senfiaj•3mo ago
Yeah, it worked, it seems to be a static rendered html with no interactivity though.
kataqatsi•3mo ago
for those interested in more CSS-Only art, Lynn Fisher makes some neat stuff

https://a.singlediv.com/

ForgetItJake•3mo ago
Reminds me of RCT, very nice!
docmars•3mo ago
The next obvious step will be SimCity 2000 completely implemented using web tech. One can hope!

Start all of your commands with a comma (2009)

https://rhodesmill.org/brandon/2009/commands-with-comma/
256•theblazehen•2d ago•85 comments

Hoot: Scheme on WebAssembly

https://www.spritely.institute/hoot/
26•AlexeyBrin•1h ago•2 comments

OpenCiv3: Open-source, cross-platform reimagining of Civilization III

https://openciv3.org/
706•klaussilveira•15h ago•206 comments

The Waymo World Model

https://waymo.com/blog/2026/02/the-waymo-world-model-a-new-frontier-for-autonomous-driving-simula...
969•xnx•21h ago•558 comments

Vocal Guide – belt sing without killing yourself

https://jesperordrup.github.io/vocal-guide/
69•jesperordrup•6h ago•31 comments

Reinforcement Learning from Human Feedback

https://arxiv.org/abs/2504.12501
7•onurkanbkrc•48m ago•0 comments

Making geo joins faster with H3 indexes

https://floedb.ai/blog/how-we-made-geo-joins-400-faster-with-h3-indexes
135•matheusalmeida•2d ago•35 comments

Where did all the starships go?

https://www.datawrapper.de/blog/science-fiction-decline
45•speckx•4d ago•36 comments

Unseen Footage of Atari Battlezone Arcade Cabinet Production

https://arcadeblogger.com/2026/02/02/unseen-footage-of-atari-battlezone-cabinet-production/
68•videotopia•4d ago•7 comments

Welcome to the Room – A lesson in leadership by Satya Nadella

https://www.jsnover.com/blog/2026/02/01/welcome-to-the-room/
39•kaonwarb•3d ago•30 comments

Ga68, a GNU Algol 68 Compiler

https://fosdem.org/2026/schedule/event/PEXRTN-ga68-intro/
13•matt_d•3d ago•2 comments

What Is Ruliology?

https://writings.stephenwolfram.com/2026/01/what-is-ruliology/
45•helloplanets•4d ago•46 comments

Show HN: Look Ma, No Linux: Shell, App Installer, Vi, Cc on ESP32-S3 / BreezyBox

https://github.com/valdanylchuk/breezydemo
240•isitcontent•16h ago•26 comments

Monty: A minimal, secure Python interpreter written in Rust for use by AI

https://github.com/pydantic/monty
238•dmpetrov•16h ago•126 comments

Show HN: I spent 4 years building a UI design tool with only the features I use

https://vecti.com
340•vecti•18h ago•149 comments

Hackers (1995) Animated Experience

https://hackers-1995.vercel.app/
506•todsacerdoti•23h ago•248 comments

Sheldon Brown's Bicycle Technical Info

https://www.sheldonbrown.com/
389•ostacke•22h ago•98 comments

Show HN: If you lose your memory, how to regain access to your computer?

https://eljojo.github.io/rememory/
304•eljojo•18h ago•188 comments

Microsoft open-sources LiteBox, a security-focused library OS

https://github.com/microsoft/litebox
361•aktau•22h ago•186 comments

An Update on Heroku

https://www.heroku.com/blog/an-update-on-heroku/
428•lstoll•22h ago•284 comments

Cross-Region MSK Replication: K2K vs. MirrorMaker2

https://medium.com/lensesio/cross-region-msk-replication-a-comprehensive-performance-comparison-o...
3•andmarios•4d ago•1 comments

PC Floppy Copy Protection: Vault Prolok

https://martypc.blogspot.com/2024/09/pc-floppy-copy-protection-vault-prolok.html
71•kmm•5d ago•10 comments

Was Benoit Mandelbrot a hedgehog or a fox?

https://arxiv.org/abs/2602.01122
24•bikenaga•3d ago•11 comments

Dark Alley Mathematics

https://blog.szczepan.org/blog/three-points/
96•quibono•4d ago•22 comments

The AI boom is causing shortages everywhere else

https://www.washingtonpost.com/technology/2026/02/07/ai-spending-economy-shortages/
26•1vuio0pswjnm7•2h ago•16 comments

How to effectively write quality code with AI

https://heidenstedt.org/posts/2026/how-to-effectively-write-quality-code-with-ai/
271•i5heu•18h ago•219 comments

Delimited Continuations vs. Lwt for Threads

https://mirageos.org/blog/delimcc-vs-lwt
34•romes•4d ago•3 comments

I now assume that all ads on Apple news are scams

https://kirkville.com/i-now-assume-that-all-ads-on-apple-news-are-scams/
1079•cdrnsf•1d ago•461 comments

Introducing the Developer Knowledge API and MCP Server

https://developers.googleblog.com/introducing-the-developer-knowledge-api-and-mcp-server/
64•gfortaine•13h ago•30 comments

Understanding Neural Network, Visually

https://visualrambling.space/neural-network/
306•surprisetalk•3d ago•44 comments