Entertaining Web Geometry: Building an Interactive 3D CSS Hexagon

An introduction to the 3D Hexagon and its React wrapper

Interactive hexagons | Created by author

We all are tired of boring enterprise projects where all web parts consist of React (Angular, Vue, whatever) forms, standard components, and state managers. Let’s bring some fun into our development life and build something non-trivial that can be used to build a fun web page or interactive service. Let me introduce the 3D Hexagon module and its React wrapper!

Concept

3D Hexagon

We all like geometrical shapes and interact with them all the time on the web and in real life. The most common 2D ones are rectangles and circles, and cubes and spheres from the 3D world. But what if we want to present something more complex on our site?

Then the range of available libraries/packages/ready solutions drastically decreases, and finding something good becomes challenging. I want to make this gap a bit smaller, so I built a tiny module that builds 3D hexagons using pure CSS and a React component wrapper to represent its graphical part (however, you can do it on your own with plain HTML if needed. An example will…