prysm/svg/atoms/text-scale.svg

image
ฯ€ 0.0% 282 words ยท 2 min 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 360" width="480" height="360">
  <!-- text atom: size scale h1 through micro, Play font -->
  <!-- g=8, all sizes in quanta -->
  <rect width="480" height="360" fill="#000000"/>

  <text x="240" y="28" font-family="Play, sans-serif" font-size="14" fill="#555555" text-anchor="middle">text size scale (g = 8)</text>

  <!-- h1: 4g = 32px -->
  <text x="24" y="76" font-family="Play, sans-serif" font-size="32" fill="#ffffff">h1 โ€” 4g</text>
  <text x="456" y="76" font-family="Play, sans-serif" font-size="11" fill="#555555" text-anchor="end">32px</text>

  <!-- h2: 3g = 24px -->
  <text x="24" y="116" font-family="Play, sans-serif" font-size="24" fill="#ffffff">h2 โ€” 3g</text>
  <text x="456" y="116" font-family="Play, sans-serif" font-size="11" fill="#555555" text-anchor="end">24px</text>

  <!-- h3: 5g/2 = 20px -->
  <text x="24" y="152" font-family="Play, sans-serif" font-size="20" fill="#ffffff">h3 โ€” 5g/2</text>
  <text x="456" y="152" font-family="Play, sans-serif" font-size="11" fill="#555555" text-anchor="end">20px</text>

  <!-- body: 2g = 16px -->
  <text x="24" y="184" font-family="Play, sans-serif" font-size="16" fill="#ffffff">body โ€” 2g</text>
  <text x="456" y="184" font-family="Play, sans-serif" font-size="11" fill="#555555" text-anchor="end">16px</text>

  <!-- caption: 7g/4 = 14px -->
  <text x="24" y="214" font-family="Play, sans-serif" font-size="14" fill="#d7d7d7">caption โ€” 7g/4</text>
  <text x="456" y="214" font-family="Play, sans-serif" font-size="11" fill="#555555" text-anchor="end">14px</text>

  <!-- micro: 3g/2 = 12px -->
  <text x="24" y="240" font-family="Play, sans-serif" font-size="12" fill="#777777">micro โ€” 3g/2</text>
  <text x="456" y="240" font-family="Play, sans-serif" font-size="11" fill="#555555" text-anchor="end">12px</text>

  <!-- separator -->
  <rect x="24" y="260" width="432" height="1" fill="#222222"/>

  <!-- color levels -->
  <text x="240" y="284" font-family="Play, sans-serif" font-size="14" fill="#555555" text-anchor="middle">text color levels</text>

  <text x="24" y="312" font-family="Play, sans-serif" font-size="14" fill="#ffffff">primary</text>
  <text x="120" y="312" font-family="Play, sans-serif" font-size="14" fill="#d7d7d7">secondary</text>
  <text x="228" y="312" font-family="Play, sans-serif" font-size="14" fill="#777777">dim</text>
  <text x="296" y="312" font-family="Play, sans-serif" font-size="14" fill="#4b4b4d">muted</text>

  <!-- emotion override examples -->
  <text x="24" y="344" font-family="Play, sans-serif" font-size="14" fill="#00fe00">joy</text>
  <text x="80" y="344" font-family="Play, sans-serif" font-size="14" fill="#ff0000">anger</text>
  <text x="148" y="344" font-family="Play, sans-serif" font-size="14" fill="#fcf000">surprise</text>
  <text x="248" y="344" font-family="Play, sans-serif" font-size="14" fill="#00acff">interest</text>
  <text x="340" y="344" font-family="Play, sans-serif" font-size="14" fill="#304ffe">sadness</text>
  <text x="424" y="344" font-family="Play, sans-serif" font-size="14" fill="#d500f9">fear</text>
</svg>

Graph