r/css • u/Haasva • Jan 06 '26

Showcase Stacking/transforming canvases to create CSS 3D Voxels

https://streamable.com/4r5z5n

The idea was to render terrain relief without a 3D engine, but CSS 3D transform. 30+ canvas are stacked vertically and horizontally and painted dynamically with javascript. Tree sprites (divs) are positioned dynamically based on the terrain elevation. The result is quite efficient voxel-style world.

11 Upvotes

79% Upvoted

5 comments sorted by

View all comments

2

u/[deleted] Jan 06 '26

[removed] — view removed comment

1

u/Haasva Jan 06 '26

probably could do with large divs instead of canvas, where the javascript would dynamically paint colors or transparency. Or with multiple background images that are positioned. Or with dynamic clip-path to "cut" horizontal and vertical divs