content: five diagrams, drawn rather than generated
Salter-Harris I–V, the parabolic profile and its two lanes, the conducting and respiratory zones, the four types of respiratory failure, and the mole as the bridge between one atom and a weighable mass. Each is in the image bank with a title, a description and a source, and embedded in the article it explains — so it behaves like every other figure: a thumbnail in the prose, the full view on a click, findable by what it shows. Drawn as SVG and not generated as pictures, for two reasons. A schematic has to have every label exactly right and stay right at any size, and one assembled from shapes is corrected by editing a line rather than by rolling the dice again. And a generated raster of anything clinical would be a fabrication dressed as evidence, which is the one thing a teaching figure must never be. The sources are kept here beside the docs because they are text, and text belongs in the repository where it can be diffed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TqXevQJhxFrM7jJg82cgZN
This commit is contained in:
Daniel
parent
242e787040
commit
cbff4ab073
5 changed files with 217 additions and 0 deletions
34
docs/figures/mole-bridge.svg
Normal file
34
docs/figures/mole-bridge.svg
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 260" role="img" aria-label="The mole as the bridge between one atom and a mass you can weigh">
|
||||
<style>
|
||||
.molebr-card { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 2; rx: 10; }
|
||||
.molebr-mid { fill: #e0edff; stroke: #60a5fa; stroke-width: 2.5; rx: 12; }
|
||||
.molebr-h { font: 700 15px system-ui, sans-serif; fill: #1e293b; text-anchor: middle; }
|
||||
.molebr-b { font: 12.5px system-ui, sans-serif; fill: #475569; text-anchor: middle; }
|
||||
.molebr-n { font: 700 17px ui-monospace, monospace; fill: #1d4ed8; text-anchor: middle; }
|
||||
.molebr-ar { stroke: #64748b; stroke-width: 2.5; marker-end: url(#a); fill: none; }
|
||||
</style>
|
||||
<defs><marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#64748b"/></marker></defs>
|
||||
|
||||
<rect class="molebr-card" x="20" y="60" width="160" height="110"/>
|
||||
<text class="molebr-h" x="100" y="92">One atom</text>
|
||||
<text class="molebr-b" x="100" y="118">carbon-12</text>
|
||||
<text class="molebr-n" x="100" y="146">12 amu</text>
|
||||
|
||||
<rect class="molebr-mid" x="230" y="46" width="170" height="138"/>
|
||||
<text class="molebr-h" x="315" y="82">One mole</text>
|
||||
<text class="molebr-n" x="315" y="112">6.022 × 10²³</text>
|
||||
<text class="molebr-b" x="315" y="138">particles</text>
|
||||
<text class="molebr-b" x="315" y="160">Avogadro's number</text>
|
||||
|
||||
<rect class="molebr-card" x="450" y="60" width="150" height="110"/>
|
||||
<text class="molebr-h" x="525" y="92">On the balance</text>
|
||||
<text class="molebr-b" x="525" y="118">carbon</text>
|
||||
<text class="molebr-n" x="525" y="146">12 g</text>
|
||||
|
||||
<path class="molebr-ar" d="M186 115 H 224"/>
|
||||
<path class="molebr-ar" d="M406 115 H 444"/>
|
||||
|
||||
<text class="molebr-b" x="310" y="214">1 amu is 1/12th of a carbon-12 atom — which is what makes the two ends of this line agree.</text>
|
||||
<text class="molebr-b" x="310" y="236">Equal volumes of gases, at the same temperature and pressure, hold equal numbers of particles.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
40
docs/figures/parabolic-profile.svg
Normal file
40
docs/figures/parabolic-profile.svg
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 300" role="img" aria-label="The parabolic velocity profile and radial sorting of gas in an airway">
|
||||
<style>
|
||||
.parabo-wall { stroke: #475569; stroke-width: 3; fill: none; }
|
||||
.parabo-arrow { stroke: #2563eb; stroke-width: 2.5; marker-end: url(#tip); }
|
||||
.parabo-fresh { fill: #bfdbfe; }
|
||||
.parabo-spent { fill: #fcd9a5; }
|
||||
.parabo-lab { font: 600 13px system-ui, sans-serif; fill: #1e293b; }
|
||||
.parabo-sub { font: 11.5px system-ui, sans-serif; fill: #64748b; }
|
||||
.parabo-mid { font: 600 12px system-ui, sans-serif; fill: #b45309; }
|
||||
</style>
|
||||
<defs><marker id="tip" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#2563eb"/></marker></defs>
|
||||
|
||||
<!-- The tube -->
|
||||
<path class="parabo-wall" d="M40 40 H 470"/>
|
||||
<path class="parabo-wall" d="M40 220 H 470"/>
|
||||
<rect class="parabo-spent" x="40" y="42" width="430" height="26" opacity=".75"/>
|
||||
<rect class="parabo-spent" x="40" y="192" width="430" height="26" opacity=".75"/>
|
||||
<rect class="parabo-fresh" x="40" y="96" width="430" height="68" opacity=".75"/>
|
||||
|
||||
<!-- Velocity arrows: long in the middle, nothing at the wall. -->
|
||||
<g class="parabo-arrow">
|
||||
<path d="M70 55 H 96"/>
|
||||
<path d="M70 78 H 140"/>
|
||||
<path d="M70 100 H 210"/>
|
||||
<path d="M70 130 H 250"/>
|
||||
<path d="M70 160 H 210"/>
|
||||
<path d="M70 182 H 140"/>
|
||||
<path d="M70 205 H 96"/>
|
||||
</g>
|
||||
<path d="M70 44 C 250 44, 250 216, 70 216" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-dasharray="5 4"/>
|
||||
|
||||
<text class="parabo-lab" x="300" y="128">fresh gas · centre lane · fastest</text>
|
||||
<text class="parabo-mid" x="300" y="60">spent gas · wall layer · dwells longest</text>
|
||||
<text class="parabo-mid" x="300" y="212">spent gas · wall layer · dwells longest</text>
|
||||
|
||||
<text class="parabo-lab" x="40" y="258">v(r) = v_max (1 − r²/R²)</text>
|
||||
<text class="parabo-sub" x="40" y="278">No-slip at the wall: the layer touching it does not move at all.</text>
|
||||
<text class="parabo-sub" x="40" y="294">Oscillate this and the two lanes travel in opposite directions — Taylor dispersion.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
41
docs/figures/respiratory-failure-types.svg
Normal file
41
docs/figures/respiratory-failure-types.svg
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 320" role="img" aria-label="The four types of paediatric respiratory failure">
|
||||
<style>
|
||||
.respir-box { rx: 10; stroke-width: 2; }
|
||||
.respir-t1 { fill: #dbeafe; stroke: #60a5fa; }
|
||||
.respir-t2 { fill: #fde9c9; stroke: #eab308; }
|
||||
.respir-t3 { fill: #e6e2f7; stroke: #a78bfa; }
|
||||
.respir-t4 { fill: #fbdada; stroke: #f87171; }
|
||||
.respir-h { font: 700 14px system-ui, sans-serif; fill: #1e293b; }
|
||||
.respir-b { font: 12px system-ui, sans-serif; fill: #334155; }
|
||||
.respir-g { font: 600 11.5px system-ui, sans-serif; fill: #475569; }
|
||||
</style>
|
||||
<g>
|
||||
<rect class="respir-box respir-t1" x="20" y="20" width="290" height="128"/>
|
||||
<text class="respir-h" x="38" y="46">Type 1 · lung failure</text>
|
||||
<text class="respir-g" x="38" y="68">PaO₂ ↓ · PaCO₂ normal or low</text>
|
||||
<text class="respir-b" x="38" y="92">V/Q mismatch, shunt, diffusion defect.</text>
|
||||
<text class="respir-b" x="38" y="112">Bronchiolitis, pneumonia, PARDS, oedema.</text>
|
||||
<text class="respir-b" x="38" y="132">True shunt needs PEEP, not more FiO₂.</text>
|
||||
|
||||
<rect class="respir-box respir-t2" x="330" y="20" width="290" height="128"/>
|
||||
<text class="respir-h" x="348" y="46">Type 2 · pump failure</text>
|
||||
<text class="respir-g" x="348" y="68">PaCO₂ > 50 with pH < 7.30</text>
|
||||
<text class="respir-b" x="348" y="92">Alveolar hypoventilation.</text>
|
||||
<text class="respir-b" x="348" y="112">CNS depression, neuromuscular, exhaustion</text>
|
||||
<text class="respir-b" x="348" y="132">at the end of severe obstruction.</text>
|
||||
|
||||
<rect class="respir-box respir-t3" x="20" y="164" width="290" height="118"/>
|
||||
<text class="respir-h" x="38" y="190">Type 3 · perioperative</text>
|
||||
<text class="respir-g" x="38" y="212">FRC falls</text>
|
||||
<text class="respir-b" x="38" y="236">Anaesthesia, positioning, opiates, splinting.</text>
|
||||
<text class="respir-b" x="38" y="256">Basilar collapse, then V/Q mismatch.</text>
|
||||
|
||||
<rect class="respir-box respir-t4" x="330" y="164" width="290" height="118"/>
|
||||
<text class="respir-h" x="348" y="190">Type 4 · shock</text>
|
||||
<text class="respir-g" x="348" y="212">The diaphragm competes for cardiac output</text>
|
||||
<text class="respir-b" x="348" y="236">Respiratory muscles take up to 40% of it.</text>
|
||||
<text class="respir-b" x="348" y="256">Ventilation offloads them, for the organs.</text>
|
||||
</g>
|
||||
<text class="respir-g" x="20" y="308">Distress is compensated; failure is not. A "normal" PaCO₂ in an exhausted tachypnoeic child is a rising one.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
65
docs/figures/salter-harris.svg
Normal file
65
docs/figures/salter-harris.svg
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 240" role="img" aria-label="The five Salter-Harris types">
|
||||
<defs>
|
||||
<marker id="crush" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto">
|
||||
<path d="M0 0 L10 5 L0 10 z" fill="#b03047"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<style>
|
||||
.salter-bone { fill: #e8eaf0; stroke: #94a3b8; stroke-width: 2; }
|
||||
.salter-epi { fill: #dbe6f6; stroke: #94a3b8; stroke-width: 2; }
|
||||
.salter-phys { fill: #f0a53d; }
|
||||
.salter-brk { stroke: #b03047; stroke-width: 3.5; fill: none; stroke-linecap: round; }
|
||||
.salter-cap { font: 600 13px system-ui, sans-serif; fill: #1e293b; text-anchor: middle; }
|
||||
.salter-sub { font: 11px system-ui, sans-serif; fill: #64748b; text-anchor: middle; }
|
||||
</style>
|
||||
<g>
|
||||
<!-- One column per type: epiphysis on top, physis the amber band, metaphysis below. -->
|
||||
<g transform="translate(20,20)">
|
||||
<rect class="salter-epi" x="10" y="0" width="80" height="42" rx="6"/>
|
||||
<rect class="salter-phys" x="10" y="44" width="80" height="9"/>
|
||||
<rect class="salter-bone" x="10" y="55" width="80" height="95" rx="6"/>
|
||||
<path class="salter-brk" d="M8 48 H 92"/>
|
||||
<text class="salter-cap" x="50" y="176">Type I</text>
|
||||
<text class="salter-sub" x="50" y="192">through the physis</text>
|
||||
</g>
|
||||
<g transform="translate(148,20)">
|
||||
<rect class="salter-epi" x="10" y="0" width="80" height="42" rx="6"/>
|
||||
<rect class="salter-phys" x="10" y="44" width="80" height="9"/>
|
||||
<rect class="salter-bone" x="10" y="55" width="80" height="95" rx="6"/>
|
||||
<path class="salter-brk" d="M8 48 H 62 L 88 76"/>
|
||||
<text class="salter-cap" x="50" y="176">Type II</text>
|
||||
<text class="salter-sub" x="50" y="192">+ metaphyseal corner</text>
|
||||
</g>
|
||||
<g transform="translate(276,20)">
|
||||
<rect class="salter-epi" x="10" y="0" width="80" height="42" rx="6"/>
|
||||
<rect class="salter-phys" x="10" y="44" width="80" height="9"/>
|
||||
<rect class="salter-bone" x="10" y="55" width="80" height="95" rx="6"/>
|
||||
<path class="salter-brk" d="M60 0 V 48 H 92"/>
|
||||
<text class="salter-cap" x="50" y="176">Type III</text>
|
||||
<text class="salter-sub" x="50" y="192">into the joint</text>
|
||||
</g>
|
||||
<g transform="translate(404,20)">
|
||||
<rect class="salter-epi" x="10" y="0" width="80" height="42" rx="6"/>
|
||||
<rect class="salter-phys" x="10" y="44" width="80" height="9"/>
|
||||
<rect class="salter-bone" x="10" y="55" width="80" height="95" rx="6"/>
|
||||
<path class="salter-brk" d="M58 0 V 100"/>
|
||||
<text class="salter-cap" x="50" y="176">Type IV</text>
|
||||
<text class="salter-sub" x="50" y="192">across all three</text>
|
||||
</g>
|
||||
<g transform="translate(532,20)">
|
||||
<rect class="salter-epi" x="10" y="0" width="80" height="42" rx="6"/>
|
||||
<rect class="salter-phys" x="10" y="46" width="80" height="5"/>
|
||||
<rect class="salter-bone" x="10" y="55" width="80" height="95" rx="6"/>
|
||||
<!-- Type V is a crush, so it is drawn as force rather than as a line. -->
|
||||
<!-- Three separate paths: a marker-end lands on the end of the path, so
|
||||
three arrows need three of them. -->
|
||||
<path class="salter-brk" d="M24 8 V 30" marker-end="url(#crush)"/>
|
||||
<path class="salter-brk" d="M50 8 V 30" marker-end="url(#crush)"/>
|
||||
<path class="salter-brk" d="M76 8 V 30" marker-end="url(#crush)"/>
|
||||
<text class="salter-cap" x="50" y="176">Type V</text>
|
||||
<text class="salter-sub" x="50" y="192">crush</text>
|
||||
</g>
|
||||
</g>
|
||||
<text class="salter-sub" x="330" y="228">Amber: the physis. Red: the fracture line.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
37
docs/figures/two-zone-lung.svg
Normal file
37
docs/figures/two-zone-lung.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 300" role="img" aria-label="The conducting zone carries gas; the respiratory zone exchanges it">
|
||||
<style>
|
||||
.twozon-tube { stroke: #475569; stroke-width: 2.5; fill: none; stroke-linecap: round; }
|
||||
.twozon-flow { fill: #dbeafe; stroke: #93c5fd; }
|
||||
.twozon-exch { fill: #d9f2ea; stroke: #6ec5a8; }
|
||||
.twozon-lab { font: 600 13px system-ui, sans-serif; fill: #1e293b; }
|
||||
.twozon-sub { font: 11.5px system-ui, sans-serif; fill: #64748b; }
|
||||
.twozon-tag { font: 600 11px system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
|
||||
</style>
|
||||
<rect class="twozon-flow" x="20" y="40" width="330" height="170" rx="10" opacity=".55"/>
|
||||
<rect class="twozon-exch" x="360" y="40" width="240" height="170" rx="10" opacity=".55"/>
|
||||
|
||||
<!-- Branching airway, narrowing to the exchange zone. -->
|
||||
<path class="twozon-tube" d="M40 125 H 120"/>
|
||||
<path class="twozon-tube" d="M120 125 L 180 85 M120 125 L 180 165"/>
|
||||
<path class="twozon-tube" d="M180 85 L 240 65 M180 85 L 240 105 M180 165 L 240 145 M180 165 L 240 185"/>
|
||||
<path class="twozon-tube" d="M240 65 H 300 M240 105 H 300 M240 145 H 300 M240 185 H 300"/>
|
||||
|
||||
<g fill="#a7ddc9" stroke="#4f9e85" stroke-width="1.5">
|
||||
<circle cx="400" cy="70" r="15"/><circle cx="432" cy="92" r="15"/><circle cx="398" cy="112" r="15"/>
|
||||
<circle cx="440" cy="140" r="15"/><circle cx="404" cy="164" r="15"/><circle cx="446" cy="188" r="15"/>
|
||||
<circle cx="500" cy="82" r="15"/><circle cx="520" cy="126" r="15"/><circle cx="496" cy="170" r="15"/>
|
||||
</g>
|
||||
<path class="twozon-tube" d="M300 125 H 370" stroke-dasharray="4 4"/>
|
||||
|
||||
<text class="twozon-tag twozon-lab" x="34" y="66">Conducting zone</text>
|
||||
<text class="twozon-sub" x="34" y="86">Trachea → terminal bronchioles, ~16 generations</text>
|
||||
<text class="twozon-sub" x="34" y="232">Convection: bulk flow and streaming.</text>
|
||||
<text class="twozon-sub" x="34" y="250">No exchange at all — this is plumbing.</text>
|
||||
|
||||
<text class="twozon-tag twozon-lab" x="374" y="66">Respiratory zone</text>
|
||||
<text class="twozon-sub" x="374" y="232">Diffusion; flow velocity ≈ 0.</text>
|
||||
<text class="twozon-sub" x="374" y="250">O₂ and CO₂ cross the membrane here.</text>
|
||||
|
||||
<text class="twozon-sub" x="34" y="282">Flow only has to reach the doorstep: across one alveolus, t ≈ x²/D ≈ 2.5 ms.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in a new issue