dot/matrix← all loaders
WaveA breathing sine wave drifts left to right.
03ambient

Wave

A breathing sine wave drifts left to right.

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

used at typical sizes

WaveA breathing sine wave drifts left to right.
16px
WaveA breathing sine wave drifts left to right.
24px
WaveA breathing sine wave drifts left to right.
32px
WaveA breathing sine wave drifts left to right.
48px
WaveA breathing sine wave drifts left to right.
72px

react

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

standalone svg

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" role="img" aria-label="Wave"><title>Wave</title><desc>A breathing sine wave drifts left to right.</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-03-k 2400ms cubic-bezier(0.65, 0, 0.35, 1) infinite both;}@keyframes icon-03-k{0%{opacity:0.05;}20%{opacity:1;}55%{opacity:0.18;}100%{opacity:0.05;}}@media (prefers-reduced-motion:reduce){.l{animation:none;opacity:0.45;}}.d00{animation-delay:0ms;}.d01{animation-delay:480ms;}.d02{animation-delay:960ms;}.d03{animation-delay:1440ms;}.d04{animation-delay:1920ms;}.d10{animation-delay:48ms;}.d11{animation-delay:528ms;}.d12{animation-delay:1008ms;}.d13{animation-delay:1488ms;}.d14{animation-delay:1968ms;}.d20{animation-delay:96ms;}.d21{animation-delay:576ms;}.d22{animation-delay:1056ms;}.d23{animation-delay:1536ms;}.d24{animation-delay:2016ms;}.d30{animation-delay:144ms;}.d31{animation-delay:624ms;}.d32{animation-delay:1104ms;}.d33{animation-delay:1584ms;}.d34{animation-delay:2064ms;}.d40{animation-delay:192ms;}.d41{animation-delay:672ms;}.d42{animation-delay:1152ms;}.d43{animation-delay:1632ms;}.d44{animation-delay:2112ms;}</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 d00" href="#l" x="6" y="6"/><use class="l d01" href="#l" x="17" y="6"/><use class="l d02" href="#l" x="28" y="6"/><use class="l d03" href="#l" x="39" y="6"/><use class="l d04" href="#l" x="50" y="6"/><use class="l d10" href="#l" x="6" y="17"/><use class="l d11" href="#l" x="17" y="17"/><use class="l d12" href="#l" x="28" y="17"/><use class="l d13" href="#l" x="39" y="17"/><use class="l d14" href="#l" x="50" y="17"/><use class="l d20" href="#l" x="6" y="28"/><use class="l d21" href="#l" x="17" y="28"/><use class="l d22" href="#l" x="28" y="28"/><use class="l d23" href="#l" x="39" y="28"/><use class="l d24" href="#l" x="50" y="28"/><use class="l d30" href="#l" x="6" y="39"/><use class="l d31" href="#l" x="17" y="39"/><use class="l d32" href="#l" x="28" y="39"/><use class="l d33" href="#l" x="39" y="39"/><use class="l d34" href="#l" x="50" y="39"/><use class="l d40" href="#l" x="6" y="50"/><use class="l d41" href="#l" x="17" y="50"/><use class="l d42" href="#l" x="28" y="50"/><use class="l d43" href="#l" x="39" y="50"/><use class="l d44" href="#l" x="50" y="50"/></svg>