dot/matrix← all loaders
GliderA Conway glider walks diagonally over four generations.
29ambient

Glider

A Conway glider walks diagonally over four generations.

slug
icon-29
duration
2400ms
iteration
infinite
lit cells
12 / 25
size
2.42 KB
easing
linear

used at typical sizes

GliderA Conway glider walks diagonally over four generations.
16px
GliderA Conway glider walks diagonally over four generations.
24px
GliderA Conway glider walks diagonally over four generations.
32px
GliderA Conway glider walks diagonally over four generations.
48px
GliderA Conway glider walks diagonally over four generations.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Glider"><title>Glider</title><desc>A Conway glider walks diagonally over four generations.</desc><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-29-kf 2400ms linear infinite both;}@keyframes icon-29-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:600ms;}.d01{animation-delay:0ms;}.d02{animation-delay:600ms;}.d10{animation-delay:1200ms;}.d11{animation-delay:600ms;}.d12{animation-delay:0ms;}.d20{animation-delay:0ms;}.d21{animation-delay:0ms;}.d22{animation-delay:0ms;}.d23{animation-delay:1800ms;}.d31{animation-delay:1800ms;}.d32{animation-delay:1800ms;}</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 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 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 d31" cx="17" cy="39" r="3.1"/><circle class="lit d32" cx="28" cy="39" r="3.1"/></svg>