Tags
Flex-wrap: a row of pill-shaped chips, each sized to its label, that wrap onto new lines when they'd overflow the definite width. The container's height grows to fit however many lines result (the wrapped cross extent is computed at measure time because the width is known from the canvas).
Result
Source examples/tags.svgn
<diagram width="460" padding="20" background="#fbfbfb" theme="light">
<!-- Flex-wrap: a row of pill-shaped chips, each sized to its label, that wrap
onto new lines when they'd overflow the definite width. The container's
height grows to fit however many lines result (the wrapped cross extent is
computed at measure time because the width is known from the canvas). -->
<style>
.chip { stroke: none; }
</style>
<row wrap="true" gap="10" align="center">
<rect class="chip" rx="14" fill="#e6ecf3" color="#33415a">grammar of graphics</rect>
<rect class="chip" rx="14" fill="#dce8d6" color="#2f4a2c">marks</rect>
<rect class="chip" rx="14" fill="#f2ddd7" color="#5a3630">combinators</rect>
<rect class="chip" rx="14" fill="#e9e6f2" color="#413a5a">relations</rect>
<rect class="chip" rx="14" fill="#dce8d6" color="#2f4a2c">constraint solver</rect>
<rect class="chip" rx="14" fill="#e6ecf3" color="#33415a">scales</rect>
<rect class="chip" rx="14" fill="#f2ddd7" color="#5a3630">facets</rect>
<rect class="chip" rx="14" fill="#e9e6f2" color="#413a5a">CSS aesthetics</rect>
<rect class="chip" rx="14" fill="#e6ecf3" color="#33415a">components</rect>
<rect class="chip" rx="14" fill="#dce8d6" color="#2f4a2c">grid</rect>
<rect class="chip" rx="14" fill="#f2ddd7" color="#5a3630">flex-wrap</rect>
<rect class="chip" rx="14" fill="#e9e6f2" color="#413a5a">lazy figures</rect>
<rect class="chip" rx="14" fill="#e6ecf3" color="#33415a">difference constraints</rect>
<rect class="chip" rx="14" fill="#dce8d6" color="#2f4a2c">band scale</rect>
<rect class="chip" rx="14" fill="#f2ddd7" color="#5a3630">polar</rect>
</row>
</diagram>