Basic 3D rendering in SVG: elm-playground-3d

5 min readNov 17, 2019


“floating city”

elm-playground-3d is an experimental library built on top of elm-playground. So let me introduce shortly this library first…


elm-playground is an excellent library to “create pictures, animations, and games with Elm”. It is at the same time simple to use so beginner can learn the basic of programming and also powerful to build complex applications.

It wraps The Elm Architecture providing simple directives to draw objects on the screen (square, circle, triangle, etc.) and to transform them (move, rotate, scale).

It has

  • Three levels of difficulty that you can follow during your learning process: picture, animation, game
  • Information about the screen, the mouse and the keyboard for creating an interactive application
  • Hooks to move object, such as spin, wave, zigzag

The library support two dimensional shapes but I needed to build a simple three…