Skip to content

Instantly share code, notes, and snippets.

@hypernova7
Last active November 22, 2023 05:45
Show Gist options
  • Save hypernova7/993a3e044a310d50ddd79b94188c2d71 to your computer and use it in GitHub Desktop.
Save hypernova7/993a3e044a310d50ddd79b94188c2d71 to your computer and use it in GitHub Desktop.
Hypercube or Telegraf Animated Logo?
:root {
--ouset-cube-border-size: 10px;
--ouset-cube-border-color: rgb(220 38 38);
--inset-shadow-color-primary: rgba(0 0 0 / 0.3);
--inset-shadow-color-secondary: rgba(0 0 0 / 0.1);
--inset-margin: 30px;
--block-size: 200px;
--shape-size: 150px;
}
body {
background: rgb(30 41 59);
zoom: 3.5;
}
.container {
display: flex;
}
.block {
position: absolute;
width: var(--block-size);
height: var(--block-size);
transform: translate3d(-50%, -50%, 0);
left: 50%;
top: 50%;
}
.shape {
width: var(--shape-size);
height: var(--shape-size);
}
.cube {
position: relative;
transition: transform 16s;
transform-style: preserve-3d;
}
.cube.outer {
width: var(--block-size);
height: var(--block-size);
transform-style: preserve-3d;
animation: spin 10s infinite cubic-bezier(0.67, 0.03, 0.31, 0.98);
}
.cube.outer > .cube {
width: var(--shape-size);
height: var(--shape-size);
transform: translateX(10px) translateY(10px);
animation: spin-inner 8.33s infinite cubic-bezier(0.67, 0.03, 0.31, 0.98);
}
.side {
width: 100%;
height: 100%;
position: absolute;
transition: all 0.2s linear;
border: var(--ouset-cube-border-size) solid var(--ouset-cube-border-color);
box-shadow: inset 0 -20px 20px -10px var(--inset-shadow-color-primary), inset 20px 0 20px -10px var(--inset-shadow-color-primary), inset 0 20px 20px -10px var(--inset-shadow-color-primary), inset -20px 0 20px -10px var(--inset-shadow-color-primary);
box-sizing: border-box;
}
.side.left {
transform: translateX(calc(0px - var(--shape-size) / 2)) rotateY(-90deg);
}
.cube.outer > .side.left {
transform: translateX(-100px) rotateY(-90deg);
}
.side.right {
transform: translateX(calc(var(--shape-size) / 2)) rotateY(90deg);
}
.cube.outer >.side.right {
transform: translateX(100px) rotateY(90deg);
}
.side.top {
transform: translateY(calc(0px - var(--shape-size) / 2)) rotateX(90deg);
}
.cube.outer > .side.top {
transform: translateY(-100px) rotateX(90deg);
}
.cube.outer > .cube .side {
border: none;
background: #fff;
box-shadow: inset 0 -20px 20px -10px var(--inset-shadow-color-secondary), inset 20px 0 20px -10px var(--inset-shadow-color-secondary), inset 0 20px 20px -10px var(--inset-shadow-color-secondary), inset -20px 0 20px -10px var(--inset-shadow-color-secondary);
}
.side.bottom {
transform: translateY(calc(var(--shape-size) / 2)) rotateX(-90deg);
}
.cube.outer > .side.bottom {
transform: translateY(100px) rotateX(-90deg);
}
.side.front {
transform: translateZ(calc(var(--shape-size) / 2));
}
.cube.outer > .side.front {
transform: translateZ(100px);
}
.side.back {
transform: translateZ(calc(0px - var(--shape-size) / 2)) rotateX(180deg);
}
.cube.outer > .side.back {
transform: translateZ(-100px) rotateX(180deg);
}
@keyframes spin {
0% {
transform: rotateX(45deg) rotateY(-45deg);
}
25% {
transform: rotateX(-45deg) rotateY(-45deg);
}
50% {
transform: rotateX(-45deg) rotateY(45deg);
}
75% {
transform: rotateX(45deg) rotateY(45deg);
}
100% {
transform: rotateX(45deg) rotateY(-45deg);
}
}
@keyframes spin-inner {
0% {
transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-45deg) rotateX(45deg);
}
20% {
transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-225deg) rotateX(225deg);
}
40% {
transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-225deg) rotateX(225deg);
}
60% {
transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-405deg) rotateX(225deg);
}
80% {
transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-225deg) rotateX(405deg);
}
100% {
transform: translateX(var(--inset-margin)) translateY(var(--inset-margin)) rotateY(-45deg) rotateX(405deg);
}
}
/* Hide Edit on jsbin button */
#edit-with-js-bin {
display: none !important;
opacity: 0 !important;
}
<div class="container">
<div class="block">
<div class="shape">
<div class="cube outer">
<div class="side left"></div>
<div class="side right"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side front"></div>
<div class="side back"></div>
<div class="cube">
<div class="side left"></div>
<div class="side right"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side front"></div>
<div class="side back"></div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment