Start with a diagram that already works standing still

Animation is the garnish, not the meal. Before a single keyframe is written, draw the whole process as static shapes and labels. If a colleague can follow the diagram with the animation switched off, you have a solid base; if they cannot, motion will only add noise.

The most reliable pattern for an educational flow diagram is a small set of rounded boxes connected by directed lines. Each box is one stage — a pump, a decision, a tank. Each line is a transfer — fluid, signal, money, a request. Keep the count low. Three to seven stages is usually the sweet spot; beyond that the reader stops tracing and starts scanning.

A flow diagram: stages joined by directed flow Input Stage 1 draw Stage 2 animate Stage 3 publish Output Every arrow is one path with a dashed stroke; the dash offset is what moves. Nodes stay text, so the crawler and screen reader both read the stages. One direction per path — never both at once.
Figure 1 — The static skeleton: labelled stage boxes, directed connectors, clear input and output. Draw this before adding any animation.

Turn the connectors into moving flow

With the structure fixed, give every connector the same visual language. A dashed stroke plus a moving stroke-dashoffset is the whole trick: the dashes appear to travel along the line, so the reader instantly sees the direction of the transfer. There is nothing to redraw and nothing to load.

.flow {
  fill: none;
  stroke: #2563eb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 12 9;
  animation: travel 1.15s linear infinite;
}

@keyframes travel {
  to { stroke-dashoffset: -42; }
}

The dash array sets the visible dash and the gap; the offset animation shifts the whole pattern. A negative offset makes the dashes march forward, which is why a single direction is enough to imply flow. If two arrows in your diagram run opposite ways, give them opposite offsets so they never look like the same current.

Bottom line: a dashed line that moves is cheaper, crisper and more readable than any particle effect — and it scales perfectly because it is still just vector geometry.

Calm beats busy

The most common mistake in educational animation is speed. A flow that races is impressive for three seconds and tiring for thirty. Slow the dash down until the eye can follow one segment at a time, usually somewhere between one and two seconds per cycle, and let the rest of the diagram hold still.

  • Animate one property. Dash offset only; do not also move, scale or fade the same shape.
  • Stagger the start. Offset each connector's animation slightly so the flow reads as a sequence, not a blink.
  • Keep labels still. Text that moves is hard to read and hurts search; let the motion live in the lines.

Work in the stop state first

Design the diagram as if the animation will never run, because for some readers it will not. Anyone using a reduced-motion setting, a slow connection or a printed copy gets only the still version. If that version is clear, the motion is a bonus; if it is not, the animation is hiding a weak diagram.

A short build checklist

  1. List the stages and the direction of transfer between them.
  2. Draw the boxes, the connectors and the labels as static SVG.
  3. Add stroke-dasharray and a single offset keyframe to each connector.
  4. Check the still version still explains the process.
  5. Wrap the animation so reduced-motion turns it off.