Public
Edited
Jun 27, 2023
<div class="container-data">
<div class="cube">
<div class="face front">
<p class="big-text"> 🧘🏻♀️ </p>
</div>
<div class="face back">Peace</div>
<div class="face left">Meditation</div>
<div class="face right">Mindfulness</div>
<div class="face top">Innward</div>
<div class="face bottom">Breath</div>
</div>
</div>
<style>
/*
@keyframes turn {
from { transform: rotate3d(0, 0, 0, 0); }
to { transform: rotate3d(1, 1, 0, 360deg); }
}
@media (prefers-reduced-motion: reduce) {
.cube {
animation: none;
transform: rotate3d(1, 1, 0, 45deg);
}
}
*/
.container-data {
width: 200px;
height: 200px;
perspective: 1000px;
padding: 50px;
margin: 50px;
}
.big-text{
font-size: 5rem;
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotate3d(1, 1, 0, ${rotate}deg);
/* animation: turn 5s linear infinite; */
}
.face {
width: 200px;
height: 200px;
background: skyblue;
border: 2px solid black;
position: absolute;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 2rem;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}
</style>
<div>
<svg class="pink-cube" viewBox="0 0 300 230">
<defs>
<g id="cube" class="cube-unit">
<rect width="21" height="24" fill="var(--lightColor)" stroke="var(--strokeColor)" transform="skewY(30)"/>
<rect width="21" height="24" fill="var(--darkColor)" stroke="var(--strokeColor)" transform="skewY(-30) translate(21 24.3)"/>
<rect width="21" height="21" fill="var(--mainColor)" stroke="var(--strokeColor)" transform="scale(1.41,.81) rotate(45) translate(0 -21)"/>
</g>
</defs>
<line opacity=".5" x1="80" x2="100" y1="150" y2="150" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
<line opacity=".5" x1="186" x2="204" y1="90" y2="90" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
<line opacity=".5" x1="115" x2="115" y1="75" y2="85" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
<use xlink:href="#cube" x="121" y="112"></use>
<use xlink:href="#cube" x="100" y="124"></use>
<use xlink:href="#cube" x="142" y="124"></use>
<use xlink:href="#cube" x="121" y="136"></use>
<use class="m-left" xlink:href="#cube" x="79" y="136"></use>
<use xlink:href="#cube" x="163" y="136"></use>
<use xlink:href="#cube" x="142" y="148"></use>
<use xlink:href="#cube" x="100" y="148"></use>
<use xlink:href="#cube" x="121" y="160"></use>
<use xlink:href="#cube" x="121" y="88"></use>
<use xlink:href="#cube" x="100" y="100"></use>
<use xlink:href="#cube" x="142" y="100"></use>
<use xlink:href="#cube" x="121" y="112"></use>
<use xlink:href="#cube" x="79" y="112"></use>
<use xlink:href="#cube" x="163" y="112"></use>
<line opacity=".5" x1="165" x2="185" y1="145" y2="145" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--light-color)" stroke-dasharray="2.5" />
<use class="m-right" xlink:href="#cube" x="142" y="124"></use>
<use xlink:href="#cube" x="100" y="124"></use>
<use xlink:href="#cube" x="121" y="136"></use>
<use xlink:href="#cube" x="121" y="64"></use>
<use class="m-up" xlink:href="#cube" x="100" y="76"></use>
<use xlink:href="#cube" x="142" y="76"></use>
<use xlink:href="#cube" x="121" y="88"></use>
<use xlink:href="#cube" x="79" y="88"></use>
<use class="m-right" xlink:href="#cube" x="163" y="88"></use>
<use xlink:href="#cube" x="142" y="100"></use>
<use xlink:href="#cube" x="100" y="100"></use>
<use xlink:href="#cube" x="121" y="112"></use>
</svg>
<p>hover over me</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blue-cube" viewBox="0 -40 300 200">
<line opacity=".5" x1="96" x2="110" y1="50" y2="50" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--light-color)" stroke-dasharray="2.5" />
<line opacity=".5" x1="190" x2="205" y1="50" y2="50" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--light-color)" stroke-dasharray="2.5" />
<use xlink:href="#cube" x="121" y="48"></use>
<use xlink:href="#cube" x="121" y="24"></use>
<use xlink:href="#cube" x="121" y="0"></use>
<use xlink:href="#cube" x="100" y="60"></use>
<use class="m-left" xlink:href="#cube" x="100" y="36"></use>
<use class="m-left" xlink:href="#cube" x="100" y="12"></use>
<use xlink:href="#cube" x="142" y="60"></use>
<use xlink:href="#cube" x="142" y="36"></use>
<use xlink:href="#cube" x="142" y="12"></use>
<g class="m-right">
<use xlink:href="#cube" x="163" y="72"></use>
<use xlink:href="#cube" x="163" y="48"></use>
<use xlink:href="#cube" x="163" y="24"></use>
</g>
<g class="m-left">
<use xlink:href="#cube" x="79" y="72"></use>
<use xlink:href="#cube" x="79" y="48"></use>
<use xlink:href="#cube" x="79" y="24"></use>
</g>
<use xlink:href="#cube" x="121" y="72"></use>
<use xlink:href="#cube" x="121" y="48"></use>
<use xlink:href="#cube" x="121" y="24"></use>
<use xlink:href="#cube" x="100" y="84"></use>
<g class="m-left">
<use xlink:href="#cube" x="100" y="60"></use>
<use xlink:href="#cube" x="100" y="36"></use>
</g>
<use xlink:href="#cube" x="142" y="84"></use>
<use xlink:href="#cube" x="142" y="60"></use>
<use xlink:href="#cube" x="142" y="36"></use>
<use xlink:href="#cube" x="121" y="96"></use>
<use xlink:href="#cube" x="121" y="72"></use>
<use xlink:href="#cube" x="121" y="48"></use>
</svg>
<p>hover over me</p>
</div>
<style>
body { font-family: 'Roboto', sans-serif; margin: 0 auto; max-width: 500px; text-align: center;}
.cube-unit {
fill-opacity: .9;
stroke-miterlimit:0;
}
.blue-cube {
--mainColor: #009CDE;
--strokeColor: #0079ad;
--lightColor: #00affa;
--darkColor: #008bc7;
}
.pink-cube {
--mainColor: #de0063;
--strokeColor: #ad004e;
--lightColor: #fa0070;
--darkColor: #c7005a;
}
@keyframes moveX {
to { transform: translateX(var(--translate, 35px)); }
}
@keyframes moveY {
to { transform: translateY(var(--translate, -35px)); }
}
.m-left, .m-right {
animation: 2s moveX alternate infinite paused;
}
.m-up, .m-down {
animation: 2s moveY alternate infinite paused;
}
.m-left { --translate: -50px; }
.m-right { --translate: 50px; }
svg:hover * { animation-play-state: running; }
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
