Untitled Document

Built with http://tridiv.com

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      
html{

  background-color:black;

}



/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use https://leaverou.github.io/prefixfree/) /!\ */ .tridiv {
  display:inline-block;
  perspective: 800px;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  background: transparent;
  font-size: 100%;
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="cylinder"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp, [class*="cylinder"] .bm, [class*="cylinder"] .tp .photon-shader, [class*="cylinder"] .bm .photon-shader {
  border-radius: 50%;
}
[class*="cylinder"] .bm {
  top: 100%;
}
/* .cyl-1 styles */
.cyl-1 {
  transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.1;
  width:12.5em;
  height:5em;
  margin:-2.5em 0 0 -6.25em;
}
.cyl-1 .tp, .cyl-1 .bm {
  width:12.5em;
  height:12.5em;
}
.cyl-1 .side {
  width:2.878043429876874em;
  height:5em;
}
.cyl-1 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .face, .cyl-1 .side {
  background-color:#2ffcf1;
}
/* .cyl-2 styles */
.cyl-2 {
  transform:translate3D(-0.0625em, 0em, 0.0625em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.65;
  width:12.5em;
  height:5em;
  margin:-2.5em 0 0 -6.25em;
}
.cyl-2 .tp, .cyl-2 .bm {
  width:12.5em;
  height:12.5em;
}
.cyl-2 .side {
  width:2.878043429876874em;
  height:5em;
}
.cyl-2 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .face, .cyl-2 .side {
  background-color:#37fa90;
}
/* .cyl-3 styles */
.cyl-3 {
  transform:translate3D(-0.125em, 0.0625em, 0.0625em) rotateX(-134.7deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.63;
  width:12.5em;
  height:5em;
  margin:-2.5em 0 0 -6.25em;
}
.cyl-3 .tp, .cyl-3 .bm {
  width:12.5em;
  height:12.5em;
}
.cyl-3 .side {
  width:2.878043429876874em;
  height:5em;
}
.cyl-3 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .face, .cyl-3 .side {
  background-color:#e8fc7e;
}
/* .cyl-4 styles */
.cyl-4 {
  transform:translate3D(-0.0625em, -0.125em, 0.125em) rotateX(-224.7deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.58;
  width:12.5em;
  height:5em;
  margin:-2.5em 0 0 -6.25em;
}
.cyl-4 .tp, .cyl-4 .bm {
  width:12.5em;
  height:12.5em;
}
.cyl-4 .side {
  width:2.878043429876874em;
  height:5em;
}
.cyl-4 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .face, .cyl-4 .side {
  background-color:#f8a4ff;
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(1486deg) rotateY(788deg); -moz-transform:rotateX(1486deg) rotateY(788deg); -ms-transform:rotateX(1486deg) rotateY(788deg); transform:rotateX(1486deg) rotateY(788deg); ">
    <div class="shape cylinder-1 cyl-1">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.529412);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.266667);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.356863);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.486275);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.329412);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 cyl-2">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.223529);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.25098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.615686);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.67451);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.345098);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0156863);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0117647);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 cyl-3">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.341176);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.431373);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.533333);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34902);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 cyl-4">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.572549);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.65098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.380392);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0235294);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0509804);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.215686);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.337255);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.458824);"></div>
      </div>
    </div>
  </div>
</div>

<div class="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(1486deg) rotateY(788deg); -moz-transform:rotateX(1486deg) rotateY(788deg); -ms-transform:rotateX(1486deg) rotateY(788deg); transform:rotateX(1486deg) rotateY(788deg); ">
    <div class="shape cylinder-1 cyl-1">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.529412);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.266667);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.356863);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.486275);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.329412);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 cyl-2">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.223529);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.25098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.615686);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.67451);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.345098);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0156863);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0117647);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 cyl-3">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.341176);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.431373);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.533333);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34902);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 cyl-4">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.572549);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.65098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.380392);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0235294);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0509804);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.215686);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.337255);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.458824);"></div>
      </div>
    </div>
  </div>
</div>
<div class="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(1486deg) rotateY(788deg); -moz-transform:rotateX(1486deg) rotateY(788deg); -ms-transform:rotateX(1486deg) rotateY(788deg); transform:rotateX(1486deg) rotateY(788deg); ">
    <div class="shape cylinder-1 cyl-1">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.529412);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.266667);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.356863);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.486275);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.329412);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 cyl-2">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.223529);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.25098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.615686);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.67451);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.345098);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0156863);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0117647);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 cyl-3">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.341176);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.431373);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.533333);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34902);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 cyl-4">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.572549);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.65098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.380392);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0235294);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0509804);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.215686);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.337255);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.458824);"></div>
      </div>
    </div>
  </div>
</div>

<div class="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(1486deg) rotateY(788deg); -moz-transform:rotateX(1486deg) rotateY(788deg); -ms-transform:rotateX(1486deg) rotateY(788deg); transform:rotateX(1486deg) rotateY(788deg); ">
    <div class="shape cylinder-1 cyl-1">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.529412);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.266667);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.356863);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.486275);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.329412);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 cyl-2">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.223529);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.25098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.615686);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.67451);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.345098);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0156863);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0117647);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 cyl-3">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.341176);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.431373);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.533333);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34902);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 cyl-4">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.572549);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.65098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.380392);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0235294);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0509804);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.215686);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.337255);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.458824);"></div>
      </div>
    </div>
  </div>
</div>
<div class="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(1486deg) rotateY(788deg); -moz-transform:rotateX(1486deg) rotateY(788deg); -ms-transform:rotateX(1486deg) rotateY(788deg); transform:rotateX(1486deg) rotateY(788deg); ">
    <div class="shape cylinder-1 cyl-1">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.529412);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.266667);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.356863);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.486275);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.329412);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 cyl-2">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.223529);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.25098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.615686);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.67451);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.345098);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0156863);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0117647);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 cyl-3">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.341176);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.431373);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.533333);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34902);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 cyl-4">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.572549);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.65098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.380392);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0235294);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0509804);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.215686);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.337255);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.458824);"></div>
      </div>
    </div>
  </div>
</div>

<div class="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(1486deg) rotateY(788deg); -moz-transform:rotateX(1486deg) rotateY(788deg); -ms-transform:rotateX(1486deg) rotateY(788deg); transform:rotateX(1486deg) rotateY(788deg); ">
    <div class="shape cylinder-1 cyl-1">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.529412);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.266667);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.356863);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.486275);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.329412);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 cyl-2">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.223529);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.25098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.615686);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.67451);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.345098);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0156863);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0117647);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 cyl-3">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.341176);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.431373);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.533333);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34902);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 cyl-4">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.572549);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.65098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.380392);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0235294);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0509804);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.215686);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.337255);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.458824);"></div>
      </div>
    </div>
  </div>
</div>
<div class="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(1486deg) rotateY(788deg); -moz-transform:rotateX(1486deg) rotateY(788deg); -ms-transform:rotateX(1486deg) rotateY(788deg); transform:rotateX(1486deg) rotateY(788deg); ">
    <div class="shape cylinder-1 cyl-1">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.529412);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.266667);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.356863);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.486275);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.329412);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 cyl-2">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.223529);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.25098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.615686);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.67451);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.345098);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0156863);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0117647);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 cyl-3">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.341176);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.431373);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.533333);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34902);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 cyl-4">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.572549);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.65098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.380392);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0235294);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0509804);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.215686);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.337255);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.458824);"></div>
      </div>
    </div>
  </div>
</div>

<div class="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(1486deg) rotateY(788deg); -moz-transform:rotateX(1486deg) rotateY(788deg); -ms-transform:rotateX(1486deg) rotateY(788deg); transform:rotateX(1486deg) rotateY(788deg); ">
    <div class="shape cylinder-1 cyl-1">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.529412);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.266667);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.356863);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.486275);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.329412);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 cyl-2">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.223529);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.25098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.615686);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.67451);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.345098);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0156863);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0117647);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 cyl-3">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.517647);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0784314);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.341176);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.431373);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.533333);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.439216);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.34902);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0666667);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 cyl-4">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.572549);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.65098);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.501961);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.380392);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.258824);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.137255);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0235294);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0509804);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.215686);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.337255);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.458824);"></div>
      </div>
    </div>
  </div>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */

html{

  background-color:black;

}



/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use https://leaverou.github.io/prefixfree/) /!\ */ .tridiv {
  display:inline-block;
  perspective: 800px;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  background: transparent;
  font-size: 100%;
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="cylinder"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp, [class*="cylinder"] .bm, [class*="cylinder"] .tp .photon-shader, [class*="cylinder"] .bm .photon-shader {
  border-radius: 50%;
}
[class*="cylinder"] .bm {
  top: 100%;
}
/* .cyl-1 styles */
.cyl-1 {
  transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.1;
  width:12.5em;
  height:5em;
  margin:-2.5em 0 0 -6.25em;
}
.cyl-1 .tp, .cyl-1 .bm {
  width:12.5em;
  height:12.5em;
}
.cyl-1 .side {
  width:2.878043429876874em;
  height:5em;
}
.cyl-1 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 6.225em);
}
.cyl-1 .face, .cyl-1 .side {
  background-color:#2ffcf1;
}
/* .cyl-2 styles */
.cyl-2 {
  transform:translate3D(-0.0625em, 0em, 0.0625em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.65;
  width:12.5em;
  height:5em;
  margin:-2.5em 0 0 -6.25em;
}
.cyl-2 .tp, .cyl-2 .bm {
  width:12.5em;
  height:12.5em;
}
.cyl-2 .side {
  width:2.878043429876874em;
  height:5em;
}
.cyl-2 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 6.225em);
}
.cyl-2 .face, .cyl-2 .side {
  background-color:#37fa90;
}
/* .cyl-3 styles */
.cyl-3 {
  transform:translate3D(-0.125em, 0.0625em, 0.0625em) rotateX(-134.7deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.63;
  width:12.5em;
  height:5em;
  margin:-2.5em 0 0 -6.25em;
}
.cyl-3 .tp, .cyl-3 .bm {
  width:12.5em;
  height:12.5em;
}
.cyl-3 .side {
  width:2.878043429876874em;
  height:5em;
}
.cyl-3 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 6.225em);
}
.cyl-3 .face, .cyl-3 .side {
  background-color:#e8fc7e;
}
/* .cyl-4 styles */
.cyl-4 {
  transform:translate3D(-0.0625em, -0.125em, 0.125em) rotateX(-224.7deg) rotateY(0deg) rotateZ(0deg);
  opacity:0.58;
  width:12.5em;
  height:5em;
  margin:-2.5em 0 0 -6.25em;
}
.cyl-4 .tp, .cyl-4 .bm {
  width:12.5em;
  height:12.5em;
}
.cyl-4 .side {
  width:2.878043429876874em;
  height:5em;
}
.cyl-4 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 6.225em);
}
.cyl-4 .face, .cyl-4 .side {
  background-color:#f8a4ff;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Untitled Document ) is write by bghryct, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © bghryct