13 ms·
Show HN: A CSS-Only Terrain Generator
- jimmydin7 11mo agolooks sick! great job :)
- mpeg 11mo agoReminds me of Populous! Very cool
- johnh-hn 11mo agoI 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) https://en.wikipedia.org/wiki/Populous_(video_game)
- dylan604 11mo agoYou 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 11mo agoJust in case you never came across it, I think the second game is much better than the first one. Enjoy the nostalgia trip!
- linsomniac 11mo agoDo tell, I've been wanting to play Populous again for a few years...
- dylan604 11mo agodosbox top result in search
- rofko 11mo agoThank you! Populous and Transport Tycoon were two big inspirations for sure :)
- RugnirViking 11mo agoReally 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 11mo agoNice! Now do collision checks ;)
- all2 11mo agoIn CSS?
- cluckindan 11mo agoYes.
- julius-fx 11mo agoThis is incredible - looks like SimCity 2000.
- lloydatkinson 11mo agoDoes it? All the tiles are usually a yellow brown aren’t they? 3000 has green land
- neogodless 11mo agoSo 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=zBh1SYcmKrHnLf7qcRhiJBx6-dGV30wcZ2gYrI3yzDmXMI9p-H8zFDoLAg5p0wkIGibDXasGGHIZ43qejbnSMsb2sahCha7-4OjucOG6_Ug%3D https://kagi.com/proxy/sim-city-2000.png?c=zBh1SYcmKrHnLf7qc... https://kagi.com/proxy/00001307.jpg?c=vxNARhwMwSpmnHAfYQrnRr0ZCuzhqe6optP5y1p-x8L1r1jRtr6LB8kjSlhtbj7J29LxOOcgYEi8qq2Ctsz1fqPkUE0ihzUSzlfSM1AIU2n2cvtn-pdqNC1XubUKewfM https://kagi.com/proxy/00001307.jpg?c=vxNARhwMwSpmnHAfYQrnRr...
- mikepurvis 11mo agoThe colouring is brown for SC2000, but the geometry is basically identical; I definitely got the same energy from it.
- petepete 11mo agoWhile close to SC2000, it's much closer to Transport Tycoon (OpenTTD). https://www.openttd.org/screenshots https://www.openttd.org/screenshots
- forthwall 11mo agoWow this really feels like roller coaster tycoon!!! (I can see lots of people refer to this to their favorite sim game though) Great work!
- deleted 11mo ago[deleted]
- deleted 11mo ago[deleted]
- andruc 11mo agoFunny, my mind went to OpenTTD
- mig39 11mo agoBoth Rollercoaster Tycoon and Transport Tycoon Deluxe (which lives on in openTTD) are by the same author, and use the same engine :-)
- lawlessone 11mo agoChris Sawyer, he made them with a tiny magnet that he used to write the games directly to a hard drive.
- brendoelfrendo 11mo agoI 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 11mo agoThe biome button graphics are taken from the OpenTTD main menu.
- Igrom 11mo agoFor me, "Briefing" from Ace Combat 2 played back in my head straight away. https://youtu.be/5uPVGs7bq3s?t=8 https://youtu.be/5uPVGs7bq3s?t=8
- robertheadley 11mo agoThis is really cool.
- w4yai 11mo agoI got some rendering issues, but otherwise very cool ! https://i.imgur.com/qT6ozyh.png https://i.imgur.com/qT6ozyh.png Firefox 144.0.2, Windows
- rofko 11mo agoThanks for the report! Are you using a dark mode extension by any chance? I’ve seen that happen with Dark Reader in Chrome.
- cmiller1 11mo agoLots of javascript for a "css-only" tool. Looks like just the rendering is css-only.
- MarsIronPI 11mo agoYep. Can confirm this does not work with JS disabled. I'm disappointed by the misleading title.
- shermantanktop 11mo agois it a Generator for CSS-Only Terrain? or a CSS-Only Generator which creates Terrain? We need PEMDAS for English.
- Elfener 11mo agoLet's use sexpr? actual meaning -> ((CSS-Only Terrain) Generator) incorrect interpretation -> (CSS-Only (Terrain Generator))
- shermantanktop 11mo agomaybe RPN? actual meaning -> CSS-Only Terrain + Generator + incorrect interpretation -> CSS-Only + Terrain Generator + Really we may need BNF here
- MarsIronPI 11mo agoLoglan anyone?
- embedding-shape 11mo agoNot to mention of all of those pesky HTML tags and images, clearly not CSS-only, what a fraud.
- cmiller1 11mo ago"CSS-only" colloquially tends to mean HTML and CSS without Javascript, sometimes without images.
- ryukoposting 11mo agoDark Reader mutilates the rendered output, but only certain tiles. No clear pattern as to what tiles get mangled. Peculiar.
- OldGreenYodaGPT 11mo agoCrazy that vibe coding can make things like this now! 2026 going to be crazy! There is no AI bubble
- stefs 11mo ago1. what's a layou tit? 2. does it sometimes raise / lower by 2 units? 3. the "flatten" tool is missing.
- EGreg 11mo agoCan 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 11mo agoThe 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 11mo agoAnyone made a real-time-strategy engine for tiled games on mobile?
- o11c 11mo agoStratagus has an android port at least ...
- EGreg 11mo agoOh 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-acquire-activision-blizzard-to-bring-the-joy-and-community-of-gaming-to-everyone-across-every-device/ https://news.microsoft.com/source/2022/01/18/microsoft-to-ac...
- iagorodriguez 11mo agoAmazing job by an amazing developer!
- ModernMech 11mo agoThis 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 11mo agoit's effectively a cpu 'renderer' with gpu painter
- paulbjensen 11mo agoReally cool, especially when I realised you could rotate the terrain and do some zooming as well.
- hersko 11mo agoThis is super cool! Wonder how hard it would be to use with an RTS game.
- bodge5000 11mo agoI'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.
- jheriko 11mo ago[dead]
- nefarious_ends 11mo agoVery cool! Do you think it’s possible to do lakes and waterfalls?
- rofko 11mo agoDefinitely! 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 11mo agoIt is giving Sega Genesis "Populous" vibes.
- em3rgent0rdr 11mo agoImpressive, 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 11mo agoIt 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 11mo agoImpressive work
- senfiaj 11mo agoWhen 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/ https://benjaminaster.com/css-minecraft/ .
- arbll 11mo agoI'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 11mo agoYou 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 11mo agoGP linked an example of a similar project that allowed you to modify the terrain without any JS at all
- thih9 11mo agoI 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 11mo agoThe 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 https://news.ycombinator.com/item?id=45814791
- 11mo ago
- kataqatsi 11mo agofor those interested in more CSS-Only art, Lynn Fisher makes some neat stuff https://a.singlediv.com/ https://a.singlediv.com/
- jheriko 11mo ago[dead]
- ForgetItJake 11mo agoReminds me of RCT, very nice!
- docmars 11mo agoThe next obvious step will be SimCity 2000 completely implemented using web tech. One can hope!
- sherinjosephroy 11mo ago[dead]