dot/matrix← all loaders
RelayAntipodal pairs ping around the perimeter.
27agent

Relay

Antipodal pairs ping around the perimeter.

slug
icon-27
duration
1800ms
iteration
infinite
lit cells
8 / 25
size
2.13 KB
easing
cubic-bezier(0.25, 1, 0.5, 1)

used at typical sizes

RelayAntipodal pairs ping around the perimeter.
16px
RelayAntipodal pairs ping around the perimeter.
24px
RelayAntipodal pairs ping around the perimeter.
32px
RelayAntipodal pairs ping around the perimeter.
48px
RelayAntipodal pairs ping around the perimeter.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Relay"><title>Relay</title><desc>Antipodal pairs ping around the perimeter.</desc><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-27-kf 1800ms cubic-bezier(0.25, 1, 0.5, 1) infinite both;}@keyframes icon-27-kf {0%{opacity:0;}8%{opacity:1;}36%{opacity:0.05;}100%{opacity:0;}}@media (prefers-reduced-motion: reduce){.lit{animation:none;opacity:0.45;}}.d00{animation-delay:0ms;}.d02{animation-delay:900ms;}.d04{animation-delay:450ms;}.d20{animation-delay:1350ms;}.d24{animation-delay:1350ms;}.d40{animation-delay:450ms;}.d42{animation-delay:900ms;}.d44{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 d00" cx="6" cy="6" r="3.1"/><circle class="lit d02" cx="28" cy="6" r="3.1"/><circle class="lit d04" cx="50" cy="6" r="3.1"/><circle class="lit d20" cx="6" cy="28" r="3.1"/><circle class="lit d24" cx="50" cy="28" r="3.1"/><circle class="lit d40" cx="6" cy="50" r="3.1"/><circle class="lit d42" cx="28" cy="50" r="3.1"/><circle class="lit d44" cx="50" cy="50" r="3.1"/></svg>