used at typical sizes
16px24px32px48px72px
react
tsx
<DotMatrixIcon iconIndex={45} size={48} />
standalone svg
svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Comet"><title>Comet</title><desc>A bright head sweeps the perimeter trailing a long, soft tail.</desc><style>.bg{fill:#ffffff;opacity:0.07;}.lit{fill:#ffffff;opacity:0;animation:icon-46-kf 2200ms linear infinite both;}@keyframes icon-46-kf {0%{opacity:0;transform:scale(1);}4%{opacity:1;transform:scale(1.25);}28%{opacity:0.35;transform:scale(1);}78%{opacity:0.06;transform:scale(1);}100%{opacity:0;transform:scale(1);}}@media (prefers-reduced-motion: reduce){.lit{animation:none;opacity:0.45;}}.d00{animation-delay:0ms;}.d01{animation-delay:138ms;}.d02{animation-delay:275ms;}.d03{animation-delay:413ms;}.d04{animation-delay:550ms;}.d10{animation-delay:2063ms;}.d14{animation-delay:688ms;}.d20{animation-delay:1925ms;}.d24{animation-delay:825ms;}.d30{animation-delay:1788ms;}.d34{animation-delay:963ms;}.d40{animation-delay:1650ms;}.d41{animation-delay:1513ms;}.d42{animation-delay:1375ms;}.d43{animation-delay:1238ms;}.d44{animation-delay:1100ms;}</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 d14" cx="50" cy="17" r="3.1"/><circle class="lit d20" cx="6" 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 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>