dot/matrix← all loaders
HandshakeTwo travelers meet at the center along the diagonal.
22agent

Handshake

Two travelers meet at the center along the diagonal.

slug
icon-22
duration
2000ms
iteration
infinite
lit cells
5 / 25
size
1.92 KB
easing
cubic-bezier(0.25, 1, 0.5, 1)

used at typical sizes

HandshakeTwo travelers meet at the center along the diagonal.
16px
HandshakeTwo travelers meet at the center along the diagonal.
24px
HandshakeTwo travelers meet at the center along the diagonal.
32px
HandshakeTwo travelers meet at the center along the diagonal.
48px
HandshakeTwo travelers meet at the center along the diagonal.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Handshake"><title>Handshake</title><desc>Two travelers meet at the center along the diagonal.</desc><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-22-kf 2000ms cubic-bezier(0.25, 1, 0.5, 1) infinite both;}@keyframes icon-22-kf {0%{opacity:0;}4%{opacity:1;}26%{opacity:0.08;}100%{opacity:0;}}@media (prefers-reduced-motion: reduce){.lit{animation:none;opacity:0.45;}}.d00{animation-delay:0ms;}.d11{animation-delay:333ms;}.d22{animation-delay:667ms;}.d33{animation-delay:333ms;}.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 d11" cx="17" cy="17" r="3.1"/><circle class="lit d22" cx="28" cy="28" r="3.1"/><circle class="lit d33" cx="39" cy="39" r="3.1"/><circle class="lit d44" cx="50" cy="50" r="3.1"/></svg>