figure{--size:15vmin;--duration:4s;--direction:1;--pull:-1.25;perspective:30rem;display:grid;grid-template-areas:"figure";place-items:center;inline-size:var(--size);aspect-ratio:1;animation:spin var(--duration) ease-in-out infinite}figure>*{--radius:calc(var(--size) / 2);--deg:calc(var(--i) * (360deg / 12));--hs:225 100%;--transform-start:translate3d(calc(cos(var(--deg)) * var(--radius)),calc(sin(var(--deg)) * var(--radius)),0) rotate(calc(var(--deg)));grid-area:figure;background-color:hsl(var(--hs) var(--l,60%));inline-size:calc(var(--size) / 4);aspect-ratio:1;-webkit-clip-path:polygon(25% 25%,100% 50%,25% 75%,0 50%);clip-path:polygon(25% 25%,100% 50%,25% 75%,0 50%);transform:var(--transform-start);transform-style:preserve-3d;animation:diamonds var(--duration) cubic-bezier(.87,0,.13,1) infinite}figure:nth-child(2){--size:30vmin;--direction:-1;--l:70%}figure:nth-child(3){--size:55vmin;--pull:-1.125;--l:80%}@keyframes spin{0%,25%{transform:scaleX(var(--direction)) rotate(0)}75%,to{transform:scaleX(var(--direction)) rotate(1turn)}}@keyframes diamonds{0%,20%{transform:var(--transform-start)}50%{-webkit-clip-path:polygon(75% 25%,100% 50%,75% 75%,0 50%);clip-path:polygon(75% 25%,100% 50%,75% 75%,0 50%);transform:translate3d(calc(cos(var(--deg)) * var(--radius) * var(--pull)),calc(sin(var(--deg)) * var(--radius) * var(--pull)),5rem) rotate(calc(var(--deg) + 90deg))}}