Skip to content

Instantly share code, notes, and snippets.

@sethkontny

sethkontny/DIAMOND.markdown

Created October 14, 2013 04:13
Show Gist options
  • Save sethkontny/6970653 to your computer and use it in GitHub Desktop.
Save sethkontny/6970653 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by seth kontny.
Raw
DIAMOND.markdown

DIAMOND

An expression of rotating shiny diamond.Those triangle shapes are made from SVG Polygon. I found SVG has a lot of potential for the 3D vector expression. Hope FF will work for it soon.

A Pen by seth kontny on CodePen.

License.

Raw
index.html
<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>
Raw
style.css
body {
padding:0;
margin:0;
overflow-x:hidden;
background-color:#08002f;
}
.base div {
position:absolute;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
svg {
position:absolute;
}
#wrapper {
width:100%;
height:100%;
position:fixed;
}
.centering {
left:50%;
top:50%;
margin-left:-96px;
margin-top:-96px;
width:192px;
height:192px;
position:absolute;
}
.base {
position:absolute;
width:inherit;
height:inherit;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:translate3d(0.00px,0.00px,0.00px);
-moz-transform:translate3d(0.00px,0.00px,0.00px);
-o-transform:translate3d(0.00px,0.00px,0.00px);
-ms-transform:translate3d(0.00px,0.00px,0.00px);
transform:translate3d(0.00px,0.00px,0.00px);
background-image:-webkit-radial-gradient(rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
background-image:-moz-radial-gradient(rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
background-image:-o-radial-gradient(rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
background-image:-ms-radial-gradient(rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
background-image:radial-gradient(, rgba(255, 255, 255, 0.67), rgba(4, 41, 81, 0.00) 63%);
}
/*--Basic Setting--*/
#top {
-webkit-transform:translate3d(0.00px,0.00px,141.00px);
-moz-transform:translate3d(0.00px,0.00px,141.00px);
-o-transform:translate3d(0.00px,0.00px,141.00px);
-ms-transform:translate3d(0.00px,0.00px,141.00px);
transform:translate3d(0.00px,0.00px,141.00px);
}
.m {
-webkit-transform:translate3d(0.00px,0.00px,85px) rotate(0.00deg) rotateY(-45.00deg);
-moz-transform:translate3d(0.00px,0.00px,85px) rotate(0.00deg) rotateY(-45.00deg);
-o-transform:translate3d(0.00px,0.00px,85px) rotate(0.00deg) rotateY(-45.00deg);
-ms-transform:translate3d(0.00px,0.00px,85px) rotate(0.00deg) rotateY(-45.00deg);
transform:translate3d(0.00px,0.00px,85px) rotate(0.00deg) rotateY(-45.00deg);
}
.b {
-webkit-transform:translate3d(-17px,0px,16px) rotate(0.00deg) rotateY(-132deg);
-moz-transform:translate3d(-17px,0px,16px) rotate(0.00deg) rotateY(-132deg);
-o-transform:translate3d(-17px,0px,16px) rotate(0.00deg) rotateY(-132deg);
-ms-transform:translate3d(-17px,0px,16px) rotate(0.00deg) rotateY(-132deg);
transform:translate3d(-17px,0px,16px) rotate(0.00deg) rotateY(-132deg);
}
.s {
-webkit-transform:translate3d(84.00px,0.00px,-39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
-moz-transform:translate3d(84.00px,0.00px,-39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
-o-transform:translate3d(84.00px,0.00px,-39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
-ms-transform:translate3d(84.00px,0.00px,-39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
transform:translate3d(84.00px,0.00px,-39.00px) rotate(0.00deg) rotateY(0.00deg) skew(90.00deg, 1.00deg);
-webkit-animation-name:shine;
-moz-animation-name:shine;
-o-animation-name:shine;
-ms-animation-name:shine;
animation-name:shine;
-webkit-animation-duration:14s;
-moz-animation-duration:14s;
-o-animation-duration:14s;
-ms-animation-duration:14s;
animation-duration:14s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
-ms-animation-fill-mode:forwards;
animation-fill-mode:forwards;
opacity:0.6;
}
.faces {
-webkit-transform:translate3d(-6.00px,67.00px,40.00px) rotate(0.00deg);
-moz-transform:translate3d(-6.00px,67.00px,40.00px) rotate(0.00deg);
-o-transform:translate3d(-6.00px,67.00px,40.00px) rotate(0.00deg);
-ms-transform:translate3d(-6.00px,67.00px,40.00px) rotate(0.00deg);
transform:translate3d(-6.00px,67.00px,40.00px) rotate(0.00deg);
}
.face2 {
-webkit-transform:translate3d(204px,58px,0px) rotate(180.00deg);
-moz-transform:translate3d(204px,58px,0px) rotate(180.00deg);
-o-transform:translate3d(204px,58px,0px) rotate(180.00deg);
-ms-transform:translate3d(204px,58px,0px) rotate(180.00deg);
transform:translate3d(204px,58px,0px) rotate(180.00deg);
}
#a1,
#a2,
#a3,
#a4,
#a5,
#a6 {
width:204px;
height:58px;
}
#a2 {
-webkit-transform:translate3d(0px,0px,0.00px) rotate(30.00deg);
-moz-transform:translate3d(0px,0px,0.00px) rotate(30.00deg);
-o-transform:translate3d(0px,0px,0.00px) rotate(30.00deg);
-ms-transform:translate3d(0px,0px,0.00px) rotate(30.00deg);
transform:translate3d(0px,0px,0.00px) rotate(30.00deg);
-webkit-animation-delay:0.5s;
-moz-animation-delay:0.5s;
-o-animation-delay:0.5s;
-ms-animation-delay:0.5s;
animation-delay:0.5s;
}
#a3 {
-webkit-transform:translate3d(0px,0px,0px) rotate(60.00deg);
-moz-transform:translate3d(0px,0px,0px) rotate(60.00deg);
-o-transform:translate3d(0px,0px,0px) rotate(60.00deg);
-ms-transform:translate3d(0px,0px,0px) rotate(60.00deg);
transform:translate3d(0px,0px,0px) rotate(60.00deg);
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-o-animation-delay:1s;
-ms-animation-delay:1s;
animation-delay:1s;
}
#a4 {
-webkit-transform:rotate(90.00deg);
-moz-transform:rotate(90.00deg);
-o-transform:rotate(90.00deg);
-ms-transform:rotate(90.00deg);
transform:rotate(90.00deg);
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
animation-delay:1.5s;
}
#a5 {
-webkit-transform:rotate(120.00deg);
-moz-transform:rotate(120.00deg);
-o-transform:rotate(120.00deg);
-ms-transform:rotate(120.00deg);
transform:rotate(120.00deg);
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;
-ms-animation-delay:2s;
animation-delay:2s;
}
#a6 {
-webkit-transform:rotate(150.00deg);
-moz-transform:rotate(150.00deg);
-o-transform:rotate(150.00deg);
-ms-transform:rotate(150.00deg);
transform:rotate(150.00deg);
-webkit-animation-delay:2.5s;
-moz-animation-delay:2.5s;
-o-animation-delay:2.5s;
-ms-animation-delay:2.5s;
animation-delay:2.5s;
}
.grad_top_1 {
stop-color:#ffffff;
stop-opacity:0.8;
}
.grad_top_2 {
stop-color:#ffffff;
stop-opacity:0.2;
}
.grad_b1 {
stop-color:#B3C0D2;
}
.grad_b2 {
stop-color:white;
stop-opacity:0;
}
.grad_b3 {
stop-color:#B3C0D2;
}
.grad_s1 {
stop-color:rgba(0, 0, 0, 1.00);
stop-opacity:0;
}
.grad_s2 {
stop-color:#ffffff;
stop-opacity:0.15;
}
.grad_s3 {
stop-color:rgba(255, 255, 255, 0.20);
stop-opacity:0;
}
.anim {
-webkit-animation-name:anim;
-moz-animation-name:anim;
-o-animation-name:anim;
-ms-animation-name:anim;
animation-name:anim;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-o-animation-duration:2s;
-ms-animation-duration:2s;
animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
-ms-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
-o-animation-timing-function:linear;
-ms-animation-timing-function:linear;
animation-timing-function:linear;
}
@-webkit-keyframes anim {
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
@-moz-keyframes anim {
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
@-o-keyframes anim {
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
@-ms-keyframes anim {
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
@keyframes anim{
0% {
opacity :1;
}
50% {
opacity :0;
}
100% {
opacity :1;
}
}
#outline {
-webkit-animation-name:outline;
-moz-animation-name:outline;
-o-animation-name:outline;
-ms-animation-name:outline;
animation-name:outline;
-webkit-animation-duration:14s;
-moz-animation-duration:14s;
-o-animation-duration:14s;
-ms-animation-duration:14s;
animation-duration:14s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transition-timing-function:linear;
-moz-transition-timing-function:linear;
-o-transition-timing-function:linear;
-ms-transition-timing-function:linear;
transition-timing-function:linear;
}
@-webkit-keyframes outline {
0% {
-webkit-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
-webkit-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@-moz-keyframes outline {
0% {
-moz-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
-moz-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@-o-keyframes outline {
0% {
-o-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
-o-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@-ms-keyframes outline {
0% {
-ms-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
-ms-transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@keyframes outline{
0% {
transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(-359deg) scale3d(1.5, 1.5, 1.5);
}
100% {
transform :perspective(0px) translate3d(0px, 91px, 0px) rotate(0deg) rotateX(70deg) rotateZ(0deg) scale3d(1.5, 1.5, 1.5);
}
}
@-webkit-keyframes shine {
0% {
-webkit-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
-webkit-transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
-webkit-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}
@-moz-keyframes shine {
0% {
-moz-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
-moz-transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
-moz-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}
@-o-keyframes shine {
0% {
-o-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
-o-transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
-o-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}
@-ms-keyframes shine {
0% {
-ms-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
-ms-transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
-ms-transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}
@keyframes shine{
0% {
transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(10deg, 1deg);
}
50% {
transform :perspective(1000px) translate3d(84px, 0px, -39px) rotate(0deg) skew(89deg, 0deg);
}
100% {
transform :translate3d(84px, 0px, -39px) rotate(0deg) skew(11deg, 1deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment