dot/matrix← all loaders
CipherDecryption flashes ripple through the grid in waves.
25agent

Cipher

Decryption flashes ripple through the grid in waves.

slug
icon-25
duration
1600ms
iteration
infinite
lit cells
25 / 25
size
3.46 KB
easing
cubic-bezier(0.25, 1, 0.5, 1)

used at typical sizes

CipherDecryption flashes ripple through the grid in waves.
16px
CipherDecryption flashes ripple through the grid in waves.
24px
CipherDecryption flashes ripple through the grid in waves.
32px
CipherDecryption flashes ripple through the grid in waves.
48px
CipherDecryption flashes ripple through the grid in waves.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Cipher"><title>Cipher</title><desc>Decryption flashes ripple through the grid in waves.</desc><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-25-kf 1600ms cubic-bezier(0.25, 1, 0.5, 1) infinite both;}@keyframes icon-25-kf {0%{opacity:0;}8%{opacity:1;}22%{opacity:0.05;}46%{opacity:0.85;}58%{opacity:0.05;}100%{opacity:0;}}@media (prefers-reduced-motion: reduce){.lit{animation:none;opacity:0.45;}}.d00{animation-delay:400ms;}.d01{animation-delay:1200ms;}.d02{animation-delay:1200ms;}.d03{animation-delay:400ms;}.d04{animation-delay:400ms;}.d10{animation-delay:1200ms;}.d11{animation-delay:1200ms;}.d12{animation-delay:400ms;}.d13{animation-delay:400ms;}.d14{animation-delay:1200ms;}.d20{animation-delay:1200ms;}.d21{animation-delay:400ms;}.d22{animation-delay:400ms;}.d23{animation-delay:1200ms;}.d24{animation-delay:1200ms;}.d30{animation-delay:400ms;}.d31{animation-delay:400ms;}.d32{animation-delay:1200ms;}.d33{animation-delay:1200ms;}.d34{animation-delay:400ms;}.d40{animation-delay:400ms;}.d41{animation-delay:1200ms;}.d42{animation-delay:1200ms;}.d43{animation-delay:400ms;}.d44{animation-delay:400ms;}</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 d01" cx="17" cy="6" r="3.1"/><circle class="lit d02" cx="28" cy="6" r="3.1"/><circle class="lit d03" cx="39" cy="6" r="3.1"/><circle class="lit d04" cx="50" cy="6" r="3.1"/><circle class="lit d10" cx="6" cy="17" r="3.1"/><circle class="lit d11" cx="17" cy="17" r="3.1"/><circle class="lit d12" cx="28" cy="17" r="3.1"/><circle class="lit d13" cx="39" cy="17" r="3.1"/><circle class="lit d14" cx="50" cy="17" r="3.1"/><circle class="lit d20" cx="6" cy="28" r="3.1"/><circle class="lit d21" cx="17" cy="28" r="3.1"/><circle class="lit d22" cx="28" cy="28" r="3.1"/><circle class="lit d23" cx="39" cy="28" r="3.1"/><circle class="lit d24" cx="50" cy="28" r="3.1"/><circle class="lit d30" cx="6" cy="39" r="3.1"/><circle class="lit d31" cx="17" cy="39" r="3.1"/><circle class="lit d32" cx="28" cy="39" r="3.1"/><circle class="lit d33" cx="39" cy="39" r="3.1"/><circle class="lit d34" cx="50" cy="39" r="3.1"/><circle class="lit d40" cx="6" cy="50" r="3.1"/><circle class="lit d41" cx="17" cy="50" r="3.1"/><circle class="lit d42" cx="28" cy="50" r="3.1"/><circle class="lit d43" cx="39" cy="50" r="3.1"/><circle class="lit d44" cx="50" cy="50" r="3.1"/></svg>