console
<main>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</main>
:root {
--deg: 1;
--x: -50%;
--y: -50%;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(var(--x, -50%), var(--y, -50%)) rotate(0deg);
font-size: 20vmin;
width: 3em;
height: 3em;
border-radius: 90% 95% 85% 105%;
background: #0f0;
mix-blend-mode: screen;
filter: hue-rotate(0deg);
animation: wobble calc(150ms * var(--t)) linear infinite;
transform-origin: -var(--y) -var(--x);
box-shadow: 0 0 .5em .2em #000 inset, 0 0 .15em 0 #fff;
display: flex;
align-items: center;
justify-content: center;
&::after {
font-size: 1em;
white-space: nowrap;
}
&:nth-child(1) {
--x: -53%;
--y: -53%;
--t: 37;
}
&:nth-child(2) {
--x: -47%;
--y: -52%;
--t: 58;
}
&:nth-child(3) {
--x: -45%;
--y: -50%;
--t: 46;
}
&:nth-child(4) {
--x: -53%;
--y: -45%;
--t: 72;
}
&:nth-child(5) {
--x: -55%;
--y: -45%;
--t: 62;
}
}
@keyframes wobble {
to {
filter: hue-rotate(360deg);
transform: translate(var(--x), var(--y)) rotate(360deg);
}
}
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: serif;
background: radial-gradient(circle at 50% 35%, #334455, #000);
}