Public
Edited
Feb 26, 2023
<figure class="circle"></figure>
<style>
.circle {
display: block;
background: black;
border-radius: 50%;
height: 300px;
width: 300px;
margin: 0;
background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}
</style>
<div class="filled-sphere">
<div class="ball"></div>
</div>
<style>
.filled-sphere {
margin: 0;
display: grid;
place-content: center;
align-items: center;
grid-auto-flow: column;
gap: 20px;
}
.ball {
--s: 200px; /* control the size */
--c: purple; /* the color */
width: var(--s);
aspect-ratio: 1;
border-radius: 100%;
display: grid;
overflow: hidden;
background: radial-gradient(at 36% 45%,#0000, 80%, #000);
box-shadow: calc(var(--s)/8) calc(var(--s)/8) calc(var(--s)/8) calc(var(--s)/-8) #0009;
}
.ball:before,
.ball:after{
content: "";
grid-area: 1/1;
}
.ball:before {
background: radial-gradient(circle at top, var(--c), #000);
mix-blend-mode: multiply;
-webkit-mask: linear-gradient(#000 0 0) bottom no-repeat;
animation: c 7s linear infinite;
}
.ball:after {
border-radius: 50%;
z-index: 1;
width: 0%;
aspect-ratio: 1;
margin: auto;
background-image: linear-gradient(var(--c) 0 0);
background-blend-mode: multiply;
animation:
b 7s linear infinite,
a 7s cubic-bezier(0.06,1334,.93,1334) infinite;
}
@keyframes a {
0%,5% {width:0%}
95%,100% {width: 0.1%}
}
@keyframes b {
0%,5% {
transform: translateY(calc(var(--s)/2)) rotateX(78deg);
background-color: #333;
}
95%,100% {
transform: translateY(calc(var(--s)/-2)) rotateX(78deg);
background-color: #ccc;
}
}
@keyframes c {
0%,5% {
-webkit-mask-size: 100% 0%;
}
95%,100% {
-webkit-mask-size: 100% 100%;
}
}
</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.
