css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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.