dot/matrix← all loaders
HexA six-cell hexagonal ring breathes around a quiet center.
56ambient

Hex

A six-cell hexagonal ring breathes around a quiet center.

slug
icon-56
duration
2400ms
iteration
infinite
lit cells
7 / 25
size
1.64 KB
easing
cubic-bezier(0.65, 0, 0.35, 1)

used at typical sizes

HexA six-cell hexagonal ring breathes around a quiet center.
16px
HexA six-cell hexagonal ring breathes around a quiet center.
24px
HexA six-cell hexagonal ring breathes around a quiet center.
32px
HexA six-cell hexagonal ring breathes around a quiet center.
48px
HexA six-cell hexagonal ring breathes around a quiet center.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Hex"><title>Hex</title><desc>A six-cell hexagonal ring breathes around a quiet center.</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-56-k 2400ms cubic-bezier(0.65, 0, 0.35, 1) infinite both;}@keyframes icon-56-k{0%{opacity:0.10;}20%{opacity:1;}60%{opacity:0.20;}100%{opacity:0.10;}}@media (prefers-reduced-motion:reduce){.l{animation:none;opacity:0.45;}}.d02,.d10,.d14,.d30,.d34,.d42{animation-delay:0ms;}.d22{animation-delay:1200ms;}</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 d02" href="#l" x="28" y="6"/><use class="l d10" href="#l" x="6" y="17"/><use class="l d14" href="#l" x="50" y="17"/><use class="l d22" href="#l" x="28" y="28"/><use class="l d30" href="#l" x="6" y="39"/><use class="l d34" href="#l" x="50" y="39"/><use class="l d42" href="#l" x="28" y="50"/></svg>