Published in


3D Vector Animations in Elm

Having fun with the new OpenSolid package


The code is mainly based on the new OpenSolid packages. I was really thrilled to see a full featured vector library in Elm popping up. The package documentation is excellent and there are a lot of examples for its basic functionality. I missed only concrete code samples utilizing the 3D functions and that was the main intent doing this demo.

OpenSolid consists of a set of Elm libraries for working with geometry. It is intended to provide a solid foundation for HTML-based applications in areas such as CAD (computer-aided design), CAM (computer-aided manufacturing), and 2D/3D visualization.

Dive into Code …

You can find the complete code at our GitHub repo, linked at the end of this article. Therefore I will only point you to some of the more interesting parts.

... lets generate some Geometry

First, we need an interesting object to visualize. OpenSolid provides plenty of basic 2D/3D geometry types such as points, polygons, planes and much more, which can be used to construct any scene you can imagine.

Projection to 2D

Sketch planes are the primary tool for converting back and forth between 2D and 3D

To actually draw something on the screen, each 3D point is projected into the SketchPlane, which maps 3D to 2D coordinates. The resulting 2D polygons can then easily transformed into an SVG.

Sorting by Distance to Viewer

To ensure eventually overlapping geometry has the correct drawing order, we have to sort each face by its distance to the viewer, in this case to the SketchPlane. As you see, OpenSolid provides functions for calculating distances in 3D between points and planes and much more.


Doing visualizations with Elm is such a rewarding experience.



Hi! We’re NinjaConcept, a web consultancy with leading-edge development skills and a passion for outstanding user experience design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store