Show HN: A CSS-Only Terrain Generator
56 comments
·November 4, 2025senfiaj
arbll
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.
forthwall
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!
yreg
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.)
null
andruc
Funny, my mind went to OpenTTD
mig39
Both Rollercoaster Tycoon and Transport Tycoon Deluxe (which lives on in openTTD) are by the same author, and use the same engine :-)
Igrom
For me, "Briefing" from Ace Combat 2 played back in my head straight away.
null
devmor
Reminded me quite a bit of Populous[1] as well.
worldai
This is exactly what I thought of
cmiller1
Lots of javascript for a "css-only" tool. Looks like just the rendering is css-only.
jonahx
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 use, essentially, as a nice UI for configuring your terrain and the camera angle from which it's viewed.
This is still an incredible feat.
bogwog
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
It's a "(CSS-only Terrain) Generator", not a "CSS-only (Terrain Generator)"
embedding-shape
Not to mention of all of those pesky HTML tags and images, clearly not CSS-only, what a fraud.
cmiller1
"CSS-only" colloquially tends to mean HTML and CSS without Javascript, sometimes without images.
DonaldPShimoda
The tone of the parent comment suggests they were writing in jest and are aware that "CSS-only" includes HTML.
MarsIronPI
Yep. Can confirm this does not work with JS disabled. I'm disappointed by the misleading title.
shermantanktop
is it a Generator for CSS-Only Terrain? or a CSS-Only Generator which creates Terrain?
We need PEMDAS for English.
Elfener
Let's use sexpr?
actual meaning -> ((CSS-Only Terrain) Generator)
incorrect interpretation -> (CSS-Only (Terrain Generator))
julius-fx
This is incredible - looks like SimCity 2000.
lloydatkinson
Does it? All the tiles are usually a yellow brown aren’t they? 3000 has green land
bodge5000
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.
em3rgent0rdr
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
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.
paulbjensen
Really cool, especially when I realised you could rotate the terrain and do some zooming as well.
throwaway2037
It is giving Sega Genesis "Populous" vibes.
mpeg
Reminds me of Populous!
Very cool
rofko
Thank you! Populous and Transport Tycoon were two big inspirations for sure :)
drcursor
Next step Populous in only CSS + JS
johnh-hn
You nailed it. Well done!
johnh-hn
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
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
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
Do tell, I've been wanting to play Populous again for a few years...
w4yai
I got some rendering issues, but otherwise very cool !
https://i.imgur.com/qT6ozyh.png
Firefox 144.0.2, Windows
rofko
Thanks for the report! Are you using a dark mode extension by any chance? I’ve seen that happen with Dark Reader in Chrome.
RugnirViking
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
hersko
This is super cool! Wonder how hard it would be to use with an RTS game.
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/ .