dot/matrixv0.2 · 2026
49 loaders5×5 grid~4 kb eachgithub

A small library
of quiet loaders.

Dot-matrix patterns, each animated from a single CSS keyframe and a per-dot delay map. No noise sampling, no GIFs, no JavaScript runtime. Drop the SVG into a page and it loops forever, about four kilobytes a piece.

The set

click a tile to copy its SVG, or focus and press c
01
Pulse RingsConcentric rings expand from the center.
Pulse Ringsicon-01
Concentric rings expand from the center.
02
SpiralA bright trace winds outward from the center.
Spiralicon-02
A bright trace winds outward from the center.
03
WaveA breathing sine wave drifts left to right.
Waveicon-03
A breathing sine wave drifts left to right.
04
Cross ExpandA plus shape blooms outward in Manhattan steps.
Cross Expandicon-04
A plus shape blooms outward in Manhattan steps.
05
RainIndependent drops fall column by column.
Rainicon-05
Independent drops fall column by column.
06
HeartbeatLub-dub pulse with a soft radial echo.
Heartbeaticon-06
Lub-dub pulse with a soft radial echo.
07
LoadingA trailing spinner sweeps the outer ring.
Loadingicon-07
A trailing spinner sweeps the outer ring.
08
Diagonal ScanA diagonal stripe sweeps from corner to corner.
Diagonal Scanicon-08
A diagonal stripe sweeps from corner to corner.
09
SparkleIndependent dots twinkle on a deterministic loop.
Sparkleicon-09
Independent dots twinkle on a deterministic loop.
10
Column ScanA vertical bar sweeps left to right, one column at a time.
Column Scanicon-10
A vertical bar sweeps left to right, one column at a time.
11
BeaconA single center dot pulses on a quiet field.
Beaconicon-11
A single center dot pulses on a quiet field.
12
DiamondA diamond blooms outward from the center.
Diamondicon-12
A diamond blooms outward from the center.
13
PyramidA triangle grows from the bottom up, one row at a time.
Pyramidicon-13
A triangle grows from the bottom up, one row at a time.
details →
14
BounceA bright dot travels along the main diagonal.
Bounceicon-14
A bright dot travels along the main diagonal.
15
BreathThe whole field breathes in and out together.
Breathicon-15
The whole field breathes in and out together.
16
OrbitA single dot circles the perimeter at a steady pace.
Orbiticon-16
A single dot circles the perimeter at a steady pace.
17
Twin OrbitTwo dots circle the perimeter, each owning a half.
Twin Orbiticon-17
Two dots circle the perimeter, each owning a half.
18
Ring PulseThe outer ring lights as one and slowly fades.
Ring Pulseicon-18
The outer ring lights as one and slowly fades.
19
ThinkingInner cluster fires like neurons while the field rests.
Thinkingicon-19
Inner cluster fires like neurons while the field rests.
20
StreamTokens emit in reading order, top-left to bottom-right.
Streamicon-20
Tokens emit in reading order, top-left to bottom-right.
21
Scan LineA full row sweeps top to bottom like a CRT raster.
Scan Lineicon-21
A full row sweeps top to bottom like a CRT raster.
22
HandshakeTwo travelers meet at the center along the diagonal.
Handshakeicon-22
Two travelers meet at the center along the diagonal.
23
Knight's TourA single dot traces every cell with knight moves.
Knight's Touricon-23
A single dot traces every cell with knight moves.
24
LatticeA checkerboard breathes in two opposing phases.
Latticeicon-24
A checkerboard breathes in two opposing phases.
25
CipherDecryption flashes ripple through the grid in waves.
Ciphericon-25
Decryption flashes ripple through the grid in waves.
26
ListeningConcentric rings collapse inward toward the center.
Listeningicon-26
Concentric rings collapse inward toward the center.
27
RelayAntipodal pairs ping around the perimeter.
Relayicon-27
Antipodal pairs ping around the perimeter.
28
CompileEach column fills bottom-up, then releases as one.
Compileicon-28
Each column fills bottom-up, then releases as one.
details →
29
GliderA Conway glider walks diagonally over four generations.
Glidericon-29
A Conway glider walks diagonally over four generations.
30
CaretA typewriter caret blinks while a row of dots types itself in.
Careticon-30
A typewriter caret blinks while a row of dots types itself in.
31
PendulumA row swings left and right with simple-harmonic timing.
Pendulumicon-31
A row swings left and right with simple-harmonic timing.
32
MagnetOuter dots drift inward to the core, then release outward.
Magneticon-32
Outer dots drift inward to the core, then release outward.
33
ApertureA camera iris opens in three rings, then closes back to the center.
Apertureicon-33
A camera iris opens in three rings, then closes back to the center.
details →
34
StaticVHS noise — every dot flickers on its own delay and duration.
Staticicon-34
VHS noise — every dot flickers on its own delay and duration.
35
LadderFive horizontal rungs light bottom-up, then top-down.
Laddericon-35
Five horizontal rungs light bottom-up, then top-down.
details →
36
ScatterA starburst from the center settles into stillness.
Scattericon-36
A starburst from the center settles into stillness.
37
MeshA row scan and a column scan cross at a moving intersection.
Meshicon-37
A row scan and a column scan cross at a moving intersection.
38
VerifyA checkmark traces itself once and stays lit. One-shot.
Verifyicon-38
A checkmark traces itself once and stays lit. One-shot.
39
HaltA 3×3 square opens, then collapses to a single center dot. One-shot.
Halticon-39
A 3×3 square opens, then collapses to a single center dot. One-shot.
40
RouletteA perimeter sweep decelerates and lands on a final answer.
Rouletteicon-40
A perimeter sweep decelerates and lands on a final answer.
41
NeedleA 3-cell needle pivots around the center through eight directions.
Needleicon-41
A 3-cell needle pivots around the center through eight directions.
42
Plus XA plus and an ex trade places on opposite halves of the cycle.
Plus Xicon-42
A plus and an ex trade places on opposite halves of the cycle.
43
BracketsFour corner brackets light in turn, sweeping clockwise.
Bracketsicon-43
Four corner brackets light in turn, sweeping clockwise.
44
BarA three-cell bar scans down the inner columns row by row.
Baricon-44
A three-cell bar scans down the inner columns row by row.
details →
45
Inner TwinkleThe inner 3×3 cluster twinkles on its own deterministic loop.
Inner Twinkleicon-45
The inner 3×3 cluster twinkles on its own deterministic loop.
46
CometA bright head sweeps the perimeter trailing a long, soft tail.
Cometicon-46
A bright head sweeps the perimeter trailing a long, soft tail.
47
QuartetFour runners trace a quadrant each, locked in lockstep around the ring.
Quarteticon-47
Four runners trace a quadrant each, locked in lockstep around the ring.
48
CompassCardinal arms pulse in turn — north, east, south, west.
Compassicon-48
Cardinal arms pulse in turn — north, east, south, west.
49
DockThe bottom row fills left-to-right like a typewriter loading bar.
Dockicon-49
The bottom row fills left-to-right like a typewriter loading bar.
details →

Notes