stellated rhombic dodecahedron

In this example below you will see how to do a stellated rhombic dodecahedron with some HTML / CSS and Javascript

http://en.wikipedia.org/wiki/First_stellation_of_rhombic_dodecahedron ...This polyhedron is sometimes called Escher's solid;

Thumbnail
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
Copyright ⁣ ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>stellated rhombic dodecahedron</title>
  
  
  <link rel='stylesheet prefetch' href='css/https___codepen_io_pixela.css'>
<link rel='stylesheet prefetch' href='css/https___codepen_io_pixela.css'>

  
  
</head>

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

Comments

More from ⁣

pure CSS DNA

pure CSS DNA

By pixelass
Live editing text on a canvas

Live editing text on a canvas

By pixelass
3d eye |&#xA0;pure CSS

3d eye | pure CSS

By pixelass
element queries concept

element queries concept

By ⁣

You Might Also Like

FreeCodeCamp Camper Leaderboard 2

FreeCodeCamp Camper Leaderboard 2

By catherine-b
#Codevember - Dynamic Article Timeline (ES6)

#Codevember - Dynamic Article Timeline (ES6)

By Mobius1
Flexbox - &quot;fixed&quot; withs

Flexbox - "fixed" withs

By lasseclaes
mixins

mixins

By jeanjeff
A Pen by alphadec

A Pen by alphadec

By alphadec
Performance Budget Builder

Performance Budget Builder

By bradfrost
A Pen by Irene Lakhno

A Pen by Irene Lakhno

By IreneLakhno
Responsive Homepage With Animated Intro

Responsive Homepage With Animated Intro

By daywalkerhn
© 2018 - Copyright CodeSeek.co
contact email