dot/matrix← all loaders
BeaconA single center dot pulses on a quiet field.
11status

Beacon

A single center dot pulses on a quiet field.

slug
icon-11
duration
1800ms
iteration
infinite
lit cells
1 / 25
size
1.62 KB
easing
cubic-bezier(0.16, 1, 0.3, 1)

used at typical sizes

BeaconA single center dot pulses on a quiet field.
16px
BeaconA single center dot pulses on a quiet field.
24px
BeaconA single center dot pulses on a quiet field.
32px
BeaconA single center dot pulses on a quiet field.
48px
BeaconA single center dot pulses on a quiet field.
72px

react

tsx
<DotMatrixIcon iconIndex={10} size={48} />

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Beacon"><title>Beacon</title><desc>A single center dot pulses on a quiet field.</desc><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-11-kf 1800ms cubic-bezier(0.16, 1, 0.3, 1) infinite both;}@keyframes icon-11-kf {0%{opacity:0.12;}14%{opacity:1;}40%{opacity:0.12;}100%{opacity:0.12;}}@media (prefers-reduced-motion: reduce){.lit{animation:none;opacity:0.45;}}.d22{animation-delay:0ms;}</style><circle class="bg" cx="6" cy="6" r="2.4"/><circle class="bg" cx="17" cy="6" r="2.4"/><circle class="bg" cx="28" cy="6" r="2.4"/><circle class="bg" cx="39" cy="6" r="2.4"/><circle class="bg" cx="50" cy="6" r="2.4"/><circle class="bg" cx="6" cy="17" r="2.4"/><circle class="bg" cx="17" cy="17" r="2.4"/><circle class="bg" cx="28" cy="17" r="2.4"/><circle class="bg" cx="39" cy="17" r="2.4"/><circle class="bg" cx="50" cy="17" r="2.4"/><circle class="bg" cx="6" cy="28" r="2.4"/><circle class="bg" cx="17" cy="28" r="2.4"/><circle class="bg" cx="28" cy="28" r="2.4"/><circle class="bg" cx="39" cy="28" r="2.4"/><circle class="bg" cx="50" cy="28" r="2.4"/><circle class="bg" cx="6" cy="39" r="2.4"/><circle class="bg" cx="17" cy="39" r="2.4"/><circle class="bg" cx="28" cy="39" r="2.4"/><circle class="bg" cx="39" cy="39" r="2.4"/><circle class="bg" cx="50" cy="39" r="2.4"/><circle class="bg" cx="6" cy="50" r="2.4"/><circle class="bg" cx="17" cy="50" r="2.4"/><circle class="bg" cx="28" cy="50" r="2.4"/><circle class="bg" cx="39" cy="50" r="2.4"/><circle class="bg" cx="50" cy="50" r="2.4"/><circle class="lit d22" cx="28" cy="28" r="3.1"/></svg>