Blob
Spinner
Blob
Spinner
<div class="Orb-blob">
<div class="Orb-blob-green"></div>
<div class="Orb-blob-yellow"></div>
<div class="Orb-blob-red"></div>
</div>
<div class="Orb-spinner">
<div class="Orb-spinner-child"></div>
</div>
SCSS
.Orb {
--Orb-shadow: #{inset 0 -1px 0.5em rgba(black, 0.15),
inset 0 1px 1em rgba(white, 0.75), 0 1em 3em rgba(black, 0.05)};
--Orb-size: 35px;
--green: #12ca93;
--yellow: #f7c543;
--red: #e95f6a;
&:global(.dark) {
--Orb-shadow: #{inset 0 -1px 2em rgba(black, 0.1),
inset 0 1px 0.5em rgba(white, 0.3), inset 0 -1px 0.5em rgba(white, 0.1),
0 1em 3em rgba(black, 0.1)};
}
&-blob,
&-spinner {
border: 1px solid rgba(black, 0.1);
border-left-color: rgba(black, 0.075);
border-right-color: rgba(black, 0.075);
border-top-color: rgba(black, 0.05);
border-radius: var(--Orb-size);
box-shadow: var(--Orb-shadow);
height: var(--Orb-size);
width: var(--Orb-size);
}
&-blob {
box-sizing: content-box;
isolation: isolate;
font-size: 2.5px;
position: relative;
&-green,
&-yellow,
&-red {
border-radius: 50%;
bottom: 0;
filter: blur(2.5em) contrast(3);
height: 5em;
left: 0;
margin: auto;
mix-blend-mode: screen;
position: absolute;
right: 0;
top: 0;
width: 5em;
}
&-green {
animation: green-blob 2.5s ease-in-out infinite;
background: var(--green);
@keyframes green-blob {
0%,
100% {
transform: translate(0.5em, -0.5em) scale(0.875, 1);
}
33% {
transform: translate(1.25em, -1em) scale(0.75, 0.875);
}
67% {
transform: translate(-0.5em, -0.5em) scale(1.125, 0.875);
}
}
}
&-yellow {
animation: yellow-blob 2.5s linear infinite;
background: var(--orange);
@keyframes yellow-blob {
0%,
100% {
transform: translate(2em, 1em) scale(1.125, 0.875);
}
33% {
transform: translate(-1em, -0.5em) scale(1, 1);
}
67% {
transform: translate(1em, 2em) scale(0.75, 0.875);
}
}
}
&-red {
animation: red-blob 2.5s linear infinite;
background: var(--red);
@keyframes red-blob {
0%,
100% {
transform: translate(1.75em, 1em) scale(1, 1);
}
25% {
transform: translate(-0.75em, 2em) scale(0.75, 1);
}
50% {
transform: translate(2em, 0) scale(0.7, 0.7);
}
75% {
transform: translate(1.5em, -2em) scale(0.875, 0.875);
}
}
}
}
&-spinner {
--color-1: var(--yellow);
--color-2: var(--green);
--color-3: var(--red);
--color-4: var(--green);
--color-5: var(--red);
--scale: 5em;
align-items: center;
display: flex;
font-size: 2px;
justify-content: center;
overflow: hidden;
&-child {
border-right: var(--scale) solid transparent;
border-top: var(--scale) solid var(--color-1);
border-left: var(--scale) solid transparent;
border-bottom: var(--scale) solid var(--color-4);
border-radius: var(--scale);
filter: blur(3em) contrast(3);
position: relative;
height: 0;
width: 0;
&::before,
&::after {
animation: spin linear infinite;
border-radius: var(--scale);
bottom: 0;
content: "";
height: 0;
left: calc(var(--scale) * -1);
right: 0;
position: absolute;
top: calc(var(--scale) * -1);
width: 0;
}
&::after {
border-right: var(--scale) solid transparent;
border-top: var(--scale) solid var(--color-2);
border-left: var(--scale) solid transparent;
border-bottom: var(--scale) solid var(--color-5);
animation-duration: 3s;
mix-blend-mode: color;
:global(.dark) {
mix-blend-mode: color-burn;
}
}
&::before {
border-right: var(--scale) solid transparent;
border-top: var(--scale) solid var(--color-1);
border-left: var(--scale) solid transparent;
border-bottom: var(--scale) solid var(--color-3);
animation-duration: 4s;
mix-blend-mode: exclusion;
}
}
@keyframes spin {
0% {
transform: none;
}
100% {
transform: rotate(360deg);
}
}
}
}