Figures & graphs / Marks in a figure
Drawing
The marks a diagram is made of, and the size it is placed at, so a figure matches the page it is on.
Every mark, drawn once
What a drawing is made of.
- solid: established
- dashed: absent or unsettled
- hairline: apparatus
HTML
<figure class="plate plate-wide" id="fig-marks">
<p><strong>What a drawing is made of.</strong></p>
<div class="draw-wrap" role="region" aria-label="The marks a drawing is made of" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 184" role="img" aria-label="Seven area marks — a thing, a thing with identity, its other state, something left open, a hole, a region and a grouping — and five line marks: directed, not established, apparatus, the subject, and a leader.">
<text class="draw-cap" x="16" y="16">AREAS</text>
<rect class="draw-box" x="16" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="62" y="90" text-anchor="middle">thing</text>
<rect class="draw-box-toned tone-accent" x="124" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="170" y="90" text-anchor="middle">identity</text>
<rect class="draw-box-alt tone-accent" x="232" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="278" y="90" text-anchor="middle">other state</text>
<rect class="draw-box-open" x="340" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="386" y="90" text-anchor="middle">left open</text>
<rect class="draw-box-open tone-neutral" x="448" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="494" y="90" text-anchor="middle">a hole</text>
<rect class="draw-fill tone-accent" x="556" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="602" y="90" text-anchor="middle">a region</text>
<rect class="draw-group" x="664" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="710" y="90" text-anchor="middle">grouped</text>
<text class="draw-cap" x="16" y="122">LINES</text>
<path class="draw-line draw-arrow" d="M16 142H108"/>
<text class="draw-note" x="62" y="172" text-anchor="middle">directed</text>
<path class="draw-line-open draw-arrow" d="M124 142H216"/>
<text class="draw-note" x="170" y="172" text-anchor="middle">not established</text>
<path class="draw-guide" d="M232 142H324"/>
<text class="draw-note" x="278" y="172" text-anchor="middle">apparatus</text>
<path class="draw-line draw-focus tone-accent" d="M340 142H432"/>
<text class="draw-note" x="386" y="172" text-anchor="middle">the subject</text>
<path class="leader" d="M448 142H540"/>
<circle class="leader-foot" cx="448" cy="142"/>
<text class="draw-note" x="494" y="172" text-anchor="middle">names a place</text>
</svg>
</div>
<ul class="legend legend-inline">
<li><svg viewBox="0 0 28 8" aria-hidden="true"><path class="draw-line" d="M1 4H27"/></svg>solid: established</li>
<li><svg viewBox="0 0 28 8" aria-hidden="true"><path class="draw-line-open" d="M1 4H27"/></svg>dashed: absent or unsettled</li>
<li><svg viewBox="0 0 28 8" aria-hidden="true"><path class="draw-guide" d="M1 4H27"/></svg>hairline: apparatus</li>
</ul>
<figcaption>Geometry is the generator’s; paint is the system’s. Absence is dashed in every mark, and the tone says which kind of absence — so the claim survives a reader who cannot see the hue.
<span class="plate-source">Specimen. Every mark here is a public class; none of them sets a colour in the markup.</span>
</figcaption>
</figure>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.draw-wrap / .draw | A scrolling wrapper and a drawing placed at 1:1. Set --dd-draw-width to the viewBox width in px and author coordinates at that size; it neither shrinks to a narrow column nor stretches to a wide one. |
.draw-box / -toned / -alt / -open | An area: a thing, a thing with identity, its other state drawn hollow, and nothing there. “Box” means an area, not a <rect> — a circle that is a hole takes the same role. |
.draw-group / .draw-group-open / .draw-fill | A hairline enclosure saying these belong together, the same proposed rather than established, and a filled region in the tone’s tint. |
.draw-line / -open / .draw-guide / .draw-focus | A relation, a relation not established, apparatus thinner than content, and the one mark the figure is about — emphasis is added, never subtracted. |
.draw-arrow / .draw-defs / .draw-arrowhead | A line that ends in the shared arrowhead, and the marker it points at. Put the defs block in your page shell: an unresolved marker is not an error in SVG, the line just ends. |
.draw-label / -strong / -note / -value / -cap / -mono | The type roles. A diagram’s labels are document text, read by the same reader at the same distance as the paragraph above them. |
.tone-* | Every mark reads the tone. Absence keeps its dash and changes only its hue: warn for “as far as we got”, tone-neutral for a hole, tone-danger for a measurement that does not exist. |
Usage notes
Geometry is the generator’s and paint is the system’s. Never write fill or stroke on a mark — a hand-painted mark does not follow the tone, the theme or a forced palette, and fill="var(--dd-accent)" fill-opacity=".12" is not the tint the components beside it use, least of all in dark mode. fill="none" is fine; that is a shape, not a colour. Keep text-anchor and dominant-baseline in SVG attributes: a CSS declaration beats a presentation attribute unconditionally, so one line of CSS silently overrides every alignment a generator wrote. Do not set font-size on a label, and do not write the figure’s explanation into it as more <text> — number the part and put the sentence in a key. See Annotate.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.