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.56 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><defs><circle id="b" r="2.4" fill="#ffffff" opacity="0.07"/><circle id="l" r="3.1"/></defs><style>.l{fill:#ffffff;opacity:0;animation:icon-22-k 2000ms cubic-bezier(0.25, 1, 0.5, 1) infinite both;}@keyframes icon-22-k{0%{opacity:0;}4%{opacity:1;}26%{opacity:0.08;}100%{opacity:0;}}@media (prefers-reduced-motion:reduce){.l{animation:none;opacity:0.45;}}.d00,.d44{animation-delay:0ms;}.d11,.d33{animation-delay:333ms;}.d22{animation-delay:667ms;}</style><use href="#b" x="6" y="6"/><use href="#b" x="17" y="6"/><use href="#b" x="28" y="6"/><use href="#b" x="39" y="6"/><use href="#b" x="50" y="6"/><use href="#b" x="6" y="17"/><use href="#b" x="17" y="17"/><use href="#b" x="28" y="17"/><use href="#b" x="39" y="17"/><use href="#b" x="50" y="17"/><use href="#b" x="6" y="28"/><use href="#b" x="17" y="28"/><use href="#b" x="28" y="28"/><use href="#b" x="39" y="28"/><use href="#b" x="50" y="28"/><use href="#b" x="6" y="39"/><use href="#b" x="17" y="39"/><use href="#b" x="28" y="39"/><use href="#b" x="39" y="39"/><use href="#b" x="50" y="39"/><use href="#b" x="6" y="50"/><use href="#b" x="17" y="50"/><use href="#b" x="28" y="50"/><use href="#b" x="39" y="50"/><use href="#b" x="50" y="50"/><use class="l d00" href="#l" x="6" y="6"/><use class="l d11" href="#l" x="17" y="17"/><use class="l d22" href="#l" x="28" y="28"/><use class="l d33" href="#l" x="39" y="39"/><use class="l d44" href="#l" x="50" y="50"/></svg>