Radar sweep
A rotating sweep over a circular grid, with blips that light up as the beam passes them.
Settings
Code
<div class="pt-radar"><b></b><i></i><i style="left:calc(50% + 0.0cqmin);top:calc(50% + -16.4cqmin);--a:0.000"></i><i style="left:calc(50% + -5.8cqmin);top:calc(50% + 15.1cqmin);--a:0.558"></i><i style="left:calc(50% + 9.0cqmin);top:calc(50% + 3.1cqmin);--a:0.302"></i><i style="left:calc(50% + -10.5cqmin);top:calc(50% + 17.2cqmin);--a:0.587"></i><i style="left:calc(50% + 17.4cqmin);top:calc(50% + 14.6cqmin);--a:0.361"></i><i style="left:calc(50% + 15.6cqmin);top:calc(50% + -23.8cqmin);--a:0.093"></i><i style="left:calc(50% + -38.7cqmin);top:calc(50% + 11.8cqmin);--a:0.703"></i><i style="left:calc(50% + -4.7cqmin);top:calc(50% + -11.9cqmin);--a:0.940"></i><i style="left:calc(50% + -12.1cqmin);top:calc(50% + -19.9cqmin);--a:0.913"></i><i style="left:calc(50% + 17.0cqmin);top:calc(50% + -27.5cqmin);--a:0.088"></i><i style="left:calc(50% + -8.5cqmin);top:calc(50% + -34.8cqmin);--a:0.962"></i><i style="left:calc(50% + 8.8cqmin);top:calc(50% + 11.2cqmin);--a:0.394"></i><i style="left:calc(50% + -10.6cqmin);top:calc(50% + 42.0cqmin);--a:0.539"></i><i style="left:calc(50% + 15.3cqmin);top:calc(50% + -39.9cqmin);--a:0.058"></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
The radar is great for anything about searching, tracking or scanning: the loading screen of a job search app, a security company’s hero, a delivery tracker or the landing page of a location-based game. The blips flare when the beam reaches them and fade out slowly, just like the real thing. An animated radar background in CSS.
Center your key message inside the rings rather than on top of the busiest part of the sweep. Classic green feels military or retro; switch it to your brand color and it suddenly looks a lot more like a product.