stellated rhombic dodecahedron

In this example below you will see how to do a stellated rhombic dodecahedron with some HTML / CSS and Javascripthttp://en.wikipedia.org/wiki/First_stellation_of_rhombic_dodecahedron ...This polyhedron is sometimes called Escher's solid;

This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
• HTML
``````<!DOCTYPE html>
<html lang="en" >

<meta charset="UTF-8">
<title>stellated rhombic dodecahedron</title>

<body>

<div class="pane">
<div class="cube">
<div class="side">
<div class="hypersides">
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
</div>
</div>
<div class="side">
<div class="hypersides">
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
</div>
</div>
<div class="side">
<div class="hypersides">
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
</div>
</div>
<div class="side">
<div class="hypersides">
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
</div>
</div>
<div class="side">
<div class="hypersides">
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
</div>
</div>
<div class="side">
<div class="hypersides">
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
<div class="hyperside">
<div class="face">
<div class="stellation"></div>
</div>
</div>
</div>
</div>
</div>
</div>

</body>

</html>
``````