cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
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.

This Pen is a fork of Ana Tudor's Pen tetrahedron truncation sequence (interactive).


  1. Safari looks really awkward: safari

    This is what happens on chromium OS X (large screens) Chromium

    It changes on different screen resolutions / aspect-ratio. Maybe you used the wrong units somewhere? I didn't look into the code but I'm suspecting vmin to be used somewhere.

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

You must be logged in to comment.