) @repeat100() @repeat20() ); --noise: @svg-filter(); --rule: ( :doodle { @grid: 12x1 / 100vw 100vh; background-image: var(--bg); background-position: 50%; filter: var(--noise); } @size: 100% 50%; position: absolute; top: 25%; transform: rotate(calc((@i() - 1) * 360deg / @size())); :after { --c: var(--color); --s: @r(5); content: ''; position: absolute; @size: @r(40vmin, 61vmin) @r(12vmin, 17vmin); border-left: @r(3px) solid @var(--c); border-radius: 50vmin; background: radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 42% / 3px 6px no-repeat, radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 58% / 3px 6px no-repeat, @m20(linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 @r(100%) / @r(20%) 1px no-repeat), linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 50% / @r(40%, 60%) 1px no-repeat, linear-gradient(to right, rgba(255, 255, 255, .015), transparent); transform: rotateY(0) scaleX(@var(--s)) translateZ(50vmin); transform-origin: 0 50%; will-change: transform; animation: r @r(10s, 20s) linear infinite; animation-delay: -@r(50s); } @keyframes r { to { transform: rotateY(-1turn) scaleX(@var(--s)) translateZ(50vmin) } } ); }