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:

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).

Created
//
Updated

Loading...

Safari looks really awkward:

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

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.