user profile image

Live coded on the 24th of June 2016 in 95 minutes. Needs support for transform-style: preserve-3d (so no IE, not even 11). Tested and works in Firefox 47, Chrome 51, Opera 39 on Windows 7. Should probably work in Edge and Safari too, but I cannot test. If you can test, please let me know how it works.

Update: clipping triangles to themselves seems not to work in Safari (tweet, tweet). Works in Edge except for thickness of edges as Edge doesn't support vector-effect (tweet, tweet).

Uses the Ode to Sherbet palette.

A tetrahedron has:

  • 4 regular triangular faces
  • 4 vertices
  • 6 edges

A truncated tetrahedron has:

  • 4 hexagonal faces (formed from cutting the triangular ones of the tetrahedron at the vertices)
  • 4 triangular faces (formed when opening a gap at the vertices where 3 faces meet)
  • 12 vertices
  • 18 edges

An octahedron has:

  • 8 triangular faces
  • 6 vertices
  • 12 edges

Truncation diagram:

tetrahedron truncation sequence

Also did this demo with pure CSS (no JS, no SVG) in early 2014.


  1. Working in Chrome 52.0.2743.116 (64-bit) for Mac OSX Yosemite 10.10.5 (14F1909)

  2. Also working in Safari 10.0.1 for Mac OSX El Capitan 10.11.6

  3. Doesn't quite work in Edge on Windows 10, but what does?

  4. I love this. ;D I made a change. The control will be by mouse. It would make him look beauty and cool. I think transparent is better than black. @thebabydino

  5. tetrahedron is my favorite shape that is, along with tetrix and its 4D analog, 5-cell, 8-cell (aka tesseract), sphere, cone (the infinitely large one that looks like black hole accretion disk jets), icosahedron, circle, bezier of points on 2 paralel lines, and many others I cannot name them all

  6. That is awesome!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.