What the heatmap has to say

When a beam bends, one side is stretched and the other is squeezed. The stress is not uniform inside the section: it is greatest at the outer edges and falls to nothing along the middle, at the neutral axis. A good heatmap makes that gradient visible at a glance — strongest colour at the top and bottom fibres, palest colour in the centre.

Keep the message simple. For a teaching demo you need one thing: a colour scale that clearly encodes "how hard is this bit working". Everything else in the drawing supports that.

Bending stress: strong at the edges, zero at the neutral axis neutral axis compression tension supports applied load The same gradient fills both the beam and the legend, so colour and meaning never drift apart.
Figure 1 — One gradient, clipped to the beam outline, with the neutral axis drawn as a reference line.

One gradient, one clip

The whole technique is two SVG pieces. First define a linearGradient that runs from one edge of the section to the other, with a stop for compression at the top, a pale stop at the neutral axis and a stop for tension at the bottom. Then define a clipPath holding the beam's own outline.

<linearGradient id="stress" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0"   stop-color="#2563eb"/>
  <stop offset="0.5" stop-color="#eef2f7"/>
  <stop offset="1"   stop-color="#be123c"/>
</linearGradient>

<rect x="120" y="110" width="480" height="60"
      fill="url(#stress)" clip-path="url(#clip-beam)"/>

Paint a plain rectangle with that gradient and clip it with the part shape. The gradient stays a simple two-to-three-stop ramp; the shape does all the intricate work. If the beam changes, only the clip path changes.

Tie the colour to the physics

Colour should mean something a reader can check against the mechanics. A diverging scale is the honest choice for bending: one hue for the compressed side, another for the stretched side, and a neutral pale band between them. If you instead ramp a single hue from dark to light, you imply that stress only ever has one sign, which is wrong for a bent section.

  • Add the neutral axis. A dashed centre line anchors the gradient to the section it belongs to.
  • Label both ends of the legend. Words, not just hues, so the scale survives colour blindness and greyscale printing.
  • Keep the outline on top. Draw the part edge after the heatmap so the shape never dissolves into colour.

Animate the loading if you want to

A static heatmap already teaches. If you animate, animate the load, not the colours: grow the load arrow and let a second, deeper gradient fade in over the first as the force increases. The colour then reads as a consequence of the load instead of a decoration that moves on its own.

Bottom line: one gradient, one clip, a labelled diverging scale and a neutral axis. That is enough to show a whole stress distribution without a single measured value on the page.