dot/matrix← all loaders
MeshA row scan and a column scan cross at a moving intersection.
37spinner

Mesh

A row scan and a column scan cross at a moving intersection.

slug
icon-37
duration
2400ms
iteration
infinite
lit cells
9 / 25
size
2.20 KB
easing
linear

used at typical sizes

MeshA row scan and a column scan cross at a moving intersection.
16px
MeshA row scan and a column scan cross at a moving intersection.
24px
MeshA row scan and a column scan cross at a moving intersection.
32px
MeshA row scan and a column scan cross at a moving intersection.
48px
MeshA row scan and a column scan cross at a moving intersection.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Mesh"><title>Mesh</title><desc>A row scan and a column scan cross at a moving intersection.</desc><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-37-kf 2400ms linear infinite both;}@keyframes icon-37-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;}}.d02{animation-delay:1200ms;}.d12{animation-delay:1500ms;}.d20{animation-delay:0ms;}.d21{animation-delay:300ms;}.d22{animation-delay:600ms;}.d23{animation-delay:900ms;}.d24{animation-delay:1200ms;}.d32{animation-delay:2100ms;}.d42{animation-delay:2400ms;}</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 d02" cx="28" cy="6" r="3.1"/><circle class="lit d12" cx="28" 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 d32" cx="28" cy="39" r="3.1"/><circle class="lit d42" cx="28" cy="50" r="3.1"/></svg>