https://codepen.io/t_afif/pen/OJvBbxm

html { –s: 100px; /* control the size */ –c1: #C3CCAF; –c2: #67434F; –_s: calc(2*var(–s)) calc(2*var(–s)); –_g: var(–_s) conic-gradient(at 40% 40%,#0000 75%,var(–c1) 0); –_p: var(–_s) conic-gradient(at 20% 20%,#0000 75%,var(–c2) 0); background: calc( .9*var(–s)) calc( .9*var(–s))/var(–_p), calc(-.1*var(–s)) calc(-.1*var(–s))/var(–_p), calc( .7*var(–s)) calc( .7*var(–s))/var(–_g), calc(-.3*var(–s)) calc(-.3*var(–s))/var(–_g), conic-gradient(from 90deg at 20% 20%,var(–c2) 25%,var(–c1) 0) 0 0/var(–s) var(–s); animation: m 3s infinite; } @keyframes m { 0% { background-position: calc( .9*var(–s)) calc( .9*var(–s)), calc(-.1*var(–s)) calc(-.1*var(–s)), calc( .7*var(–s)) calc( .7*var(–s)), calc(-.3*var(–s)) calc(-.3*var(–s)),0 0 } 25% { background-position: calc(1.9*var(–s)) calc( .9*var(–s)), calc(-1.1*var(–s)) calc(-.1*var(–s)), calc(1.7*var(–s)) calc( .7*var(–s)), calc(-1.3*var(–s)) calc(-.3*var(–s)),0 0 } 50% { background-position: calc(1.9*var(–s)) calc(-.1*var(–s)), calc(-1.1*var(–s)) calc( .9*var(–s)), calc(1.7*var(–s)) calc(-.3*var(–s)), calc(-1.3*var(–s)) calc( .7*var(–s)),0 0 } 75% { background-position: calc(2.9*var(–s)) calc(-.1*var(–s)), calc(-2.1*var(–s)) calc( .9*var(–s)), calc(2.7*var(–s)) calc(-.3*var(–s)), calc(-2.3*var(–s)) calc( .7*var(–s)),0 0 } 100% { background-position: calc(2.9*var(–s)) calc(-1.1*var(–s)), calc(-2.1*var(–s)) calc(1.9*var(–s)), calc(2.7*var(–s)) calc(-1.3*var(–s)), calc(-2.3*var(–s)) calc(1.7*var(–s)),0 0 } }
error: Content is protected !!