:doodle { --orange: 21 90.2% 47.8%; @grid: 12 / 100vmax; background: transparent; filter: blur(.1px); transform: scale(1.1); } @random { border: 3px solid hsl(var(--orange) / @rand(0.3)); } @random { filter: blur(1.5px); } @random { animation: move 60s linear alternate infinite; } @random(0.1) { animation: flicker 60s ease infinite; } @keyframes move { 0% { transform: translate( @rand(-50%, 50%), @rand(-50%, 50%) ); } 100% { transform: translate( @rand(-50%, 50%), @rand(-50%, 50%) ); } } @keyframes flicker { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } border-radius: 50%; background: hsl(var(--orange) / @rand(0.6)); transform: scale(@rand(.5, 1.2)) translate( @rand(-50%, 50%), @rand(-50%, 50%) );