xxxxxxxxxx<div id="wrapper"> <div id="outline" class="centering"> <div id="diamond" class="base"> <svg id="defs"> <defs> <polygon points="32.5,79 48.5,49 79,32 114,32 143,50 159.5,79 159.5,113.5 142,143 112.5,159.5 79,159.5 50,143 32.5,112.5 " id="t" fill="url(#grad_top)"></polygon> <polygon points="0,54 0,3 45,12" id="m2" fill="url(#grad_a)"></polygon> <polygon points="45,12 46,46 0,54" id="m1" fill="url(#grad_a2)"></polygon> <polygon points="144,54 0.5,29 144,3" id="b" fill="url(#grad_b)"></polygon> <polygon points="144,54 0.5,29 144,3" id="s" fill="url(#grad_s)"></polygon> <lineargradient id="grad_top" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="192" y2="192"> <stop offset="0" class="grad_top_1"></stop> <stop offset="1" class="grad_top_2"></stop> </lineargradient> <lineargradient id="grad_a" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100"> <stop offset="0.1" style="stop-color:#FFFFFF; stop-opacity:0.5"></stop> <stop offset="1" style="stop-color:#27344C"></stop> <stop offset="0" style="stop-color:#B3C0D2"></stop> </lineargradient> <lineargradient id="grad_a2" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100"> <stop offset="0" style="stop-color:#B3C0D2"></stop> <stop offset="0.5" style="stop-color:#FFFFFF;stop-opacity:0.1"></stop> <stop offset="1" style="stop-color:#27344C"></stop> </lineargradient> <lineargradient id="grad_b" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="50" y2="90"> <stop offset="0" class="grad_b1"></stop> <stop offset="0.5" class="grad_b2"></stop> <stop offset="1" class="grad_b3"></stop> </lineargradient> <lineargradient id="grad_s" gradientUnits="userSpaceOnUse"> <stop offset="0" class="grad_s1"></stop> <stop offset="0.5" class="grad_s2"></stop> <stop offset="1" class="grad_s3"></stop> </lineargradient> </defs> </svg> <svg id="top" width="192px" height="192px"> <use xlink:href="#t"></use> </svg> <div class="faces"> <div id="a1"> <div class="face1"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> <div class="face2"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> </div> <div id="a2" class="anim"> <div class="face1"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> <div class="face2"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> </div> <div id="a3" class="anim"> <div class="face1"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> <div class="face2"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> </div> <div id="a4" class="anim"> <div class="face1"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> <div class="face2"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> </div> <div id="a5" class="anim"> <div class="face1"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> <div class="face2"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> </div> <div id="a6" class="anim"> <div class="face1"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> <div class="face2"> <svg class="m" width="45px" height="57px"> <use xlink:href="#m1"></use> <use xlink:href="#m2"></use> </svg> <svg class="b" width="144px" height="54px"> <use xlink:href="#b"></use> </svg> <svg class="s" width="144px" height="54px"> <use xlink:href="#s"></use> </svg> </div> </div> </div> </div> </div> </div>