examples/animated.svg

<!-- Created with term-transcript v0.3.0-beta.1 (https://github.com/slowli/term-transcript) -->
<svg viewBox="0 -22 720 384" width="720" height="384" xmlns="http://www.w3.org/2000/svg">
  <switch>
    <g requiredExtensions="http://www.w3.org/1999/xhtml">
      <style>
        .container {
          padding: 0 10px;
          color: #cccccc;
          line-height: 18px;
        }
        .container pre {
          padding: 0;
          margin: 0;
          font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
          line-height: inherit;
        }
        .user-input {
          margin: 0 -10px 6px;
          color: #cccccc;
          background: rgba(255, 255, 255, 0.1);
          padding: 2px 10px;
        }
        .term-output { margin-bottom: 6px; }
        .scrollbar { fill: #fff; fill-opacity: 0.35; }
        .bold,.prompt { font-weight: bold; }
        .italic { font-style: italic; }
        .underline { text-decoration: underline; }
        .dimmed { opacity: 0.7; }
        .hard-br {
          position: relative;
          margin-left: 5px;
        }
        .hard-br:before {
          content: '↓';
          font-size: 16px;
          height: 16px;
          position: absolute;
          bottom: 0;
          transform: rotate(45deg);
          opacity: 0.8;
        }
        .fg0 { color: #0c0c0c; } .bg0 { background: #0c0c0c; }
        .fg1 { color: #c50f1f; } .bg1 { background: #c50f1f; }
        .fg2 { color: #13a10e; } .bg2 { background: #13a10e; }
        .fg3 { color: #c19c00; } .bg3 { background: #c19c00; }
        .fg4 { color: #0037da; } .bg4 { background: #0037da; }
        .fg5 { color: #881798; } .bg5 { background: #881798; }
        .fg6 { color: #3a96dd; } .bg6 { background: #3a96dd; }
        .fg7 { color: #cccccc; } .bg7 { background: #cccccc; }
        .fg8 { color: #767676; } .bg8 { background: #767676; }
        .fg9 { color: #e74856; } .bg9 { background: #e74856; }
        .fg10 { color: #16c60c; } .bg10 { background: #16c60c; }
        .fg11 { color: #f9f1a5; } .bg11 { background: #f9f1a5; }
        .fg12 { color: #3b78ff; } .bg12 { background: #3b78ff; }
        .fg13 { color: #b4009e; } .bg13 { background: #b4009e; }
        .fg14 { color: #61d6d6; } .bg14 { background: #61d6d6; }
        .fg15 { color: #f2f2f2; } .bg15 { background: #f2f2f2; }
      </style>
      <rect width="100%" height="100%" y="-22" rx="4.5" style="fill: #0c0c0c;" />
      <rect width="100%" height="26" y="-22" clip-path="inset(0 0 -10 0 round 4.5)" style="fill: #fff; fill-opacity: 0.1;"/>
      <circle cx="17" cy="-9" r="7" style="fill: #c50f1f;"/>
      <circle cx="37" cy="-9" r="7" style="fill: #c19c00;"/>
      <circle cx="57" cy="-9" r="7" style="fill: #13a10e;"/>
      <svg x="0" y="10" width="720" height="342" viewBox="0 0 720 342">
        <animate attributeName="viewBox" values="0 0 720 342;0 52 720 342;0 104 720 342;0 156 720 342;0 208 720 342;0 260 720 342;0 312 720 342;0 364 720 342;0 416 720 342" dur="32.0s" repeatCount="indefinite" calcMode="discrete" />
        <foreignObject width="720" height="710">
          <div xmlns="http://www.w3.org/1999/xhtml" class="container">
            <div class="user-input" data-exit-status="0"><pre><span class="prompt">$</span> rainbow</pre></div>
            <div class="term-output"><pre>Base colors:
<span class="underline fg0">black</span> <span class="fg4">blue</span> <span class="underline fg2">green</span> <span class="fg1">red</span> <span class="underline fg6">cyan</span> <span class="fg5">magenta</span> <span class="underline fg3">yellow</span> 
<span class="fg8">black</span> <span class="underline fg12">blue</span> <span class="fg10">green</span> <span class="underline fg9">red</span> <span class="fg14">cyan</span> <span class="underline fg13">magenta</span> <span class="fg11">yellow</span> 
Base colors (bg):
<span class="fg7 bg0">black</span> <span class="fg7 bg4">blue</span> <span class="fg7 bg2">green</span> <span class="fg7 bg1">red</span> <span class="fg7 bg6">cyan</span> <span class="fg7 bg5">magenta</span> <span class="fg7 bg3">yellow</span> 
<span class="fg15 bg8">black</span> <span class="fg15 bg12">blue</span> <span class="fg15 bg10">green</span> <span class="fg15 bg9">red</span> <span class="fg15 bg14">cyan</span> <span class="fg15 bg13">magenta</span> <span class="fg15 bg11">yellow</span> 
ANSI color palette:
<span style="color: #000000;">!</span><span class="fg7" style="background: #000000;">?</span><span style="color: #00005f;">!</span><span class="fg7" style="background: #00005f;">?</span><span style="color: #000087;">!</span><span class="fg7" style="background: #000087;">?</span><span style="color: #0000af;">!</span><span class="fg7" style="background: #0000af;">?</span><span style="color: #0000d7;">!</span><span class="fg7" style="background: #0000d7;">?</span><span style="color: #0000ff;">!</span><span class="fg7" style="background: #0000ff;">?</span><span style="color: #005f00;">!</span><span class="fg7" style="background: #005f00;">?</span><span style="color: #005f5f;">!</span><span class="fg7" style="background: #005f5f;">?</span><span style="color: #005f87;">!</span><span class="fg7" style="background: #005f87;">?</span><span style="color: #005faf;">!</span><span class="fg7" style="background: #005faf;">?</span><span style="color: #005fd7;">!</span><span class="fg7" style="background: #005fd7;">?</span><span style="color: #005fff;">!</span><span class="fg7" style="background: #005fff;">?</span><span style="color: #008700;">!</span><span class="fg7" style="background: #008700;">?</span><span style="color: #00875f;">!</span><span class="fg7" style="background: #00875f;">?</span><span style="color: #008787;">!</span><span class="fg7" style="background: #008787;">?</span><span style="color: #0087af;">!</span><span class="fg7" style="background: #0087af;">?</span><span style="color: #0087d7;">!</span><span class="fg0" style="background: #0087d7;">?</span><span style="color: #0087ff;">!</span><span class="fg0" style="background: #0087ff;">?</span><span style="color: #00af00;">!</span><span class="fg0" style="background: #00af00;">?</span><span style="color: #00af5f;">!</span><span class="fg0" style="background: #00af5f;">?</span><span style="color: #00af87;">!</span><span class="fg0" style="background: #00af87;">?</span><span style="color: #00afaf;">!</span><span class="fg0" style="background: #00afaf;">?</span><span style="color: #00afd7;">!</span><span class="fg0" style="background: #00afd7;">?</span><span style="color: #00afff;">!</span><span class="fg0" style="background: #00afff;">?</span><span style="color: #00d700;">!</span><span class="fg0" style="background: #00d700;">?</span><span style="color: #00d75f;">!</span><span class="fg0" style="background: #00d75f;">?</span><span style="color: #00d787;">!</span><span class="fg0" style="background: #00d787;">?</span><span style="color: #00d7af;">!</span><span class="fg0" style="background: #00d7af;">?</span><span style="color: #00d7d7;">!</span><span class="fg0" style="background: #00d7d7;">?</span><span style="color: #00d7ff;">!</span><span class="fg0" style="background: #00d7ff;">?</span><span style="color: #00ff00;">!</span><span class="fg0" style="background: #00ff00;">?</span><span style="color: #00ff5f;">!</span><span class="fg0" style="background: #00ff5f;">?</span><span style="color: #00ff87;">!</span><span class="fg0" style="background: #00ff87;">?</span><span style="color: #00ffaf;">!</span><span class="fg0" style="background: #00ffaf;">?</span><span style="color: #00ffd7;">!</span><span class="fg0" style="background: #00ffd7;">?</span><span style="color: #00ffff;">!</span><span class="fg0" style="background: #00ffff;">?</span>
<span style="color: #5f0000;">!</span><span class="fg7" style="background: #5f0000;">?</span><span style="color: #5f005f;">!</span><span class="fg7" style="background: #5f005f;">?</span><span style="color: #5f0087;">!</span><span class="fg7" style="background: #5f0087;">?</span><span style="color: #5f00af;">!</span><span class="fg7" style="background: #5f00af;">?</span><span style="color: #5f00d7;">!</span><span class="fg7" style="background: #5f00d7;">?</span><span style="color: #5f00ff;">!</span><span class="fg7" style="background: #5f00ff;">?</span><span style="color: #5f5f00;">!</span><span class="fg7" style="background: #5f5f00;">?</span><span style="color: #5f5f5f;">!</span><span class="fg7" style="background: #5f5f5f;">?</span><span style="color: #5f5f87;">!</span><span class="fg7" style="background: #5f5f87;">?</span><span style="color: #5f5faf;">!</span><span class="fg7" style="background: #5f5faf;">?</span><span style="color: #5f5fd7;">!</span><span class="fg7" style="background: #5f5fd7;">?</span><span style="color: #5f5fff;">!</span><span class="fg7" style="background: #5f5fff;">?</span><span style="color: #5f8700;">!</span><span class="fg7" style="background: #5f8700;">?</span><span style="color: #5f875f;">!</span><span class="fg7" style="background: #5f875f;">?</span><span style="color: #5f8787;">!</span><span class="fg7" style="background: #5f8787;">?</span><span style="color: #5f87af;">!</span><span class="fg7" style="background: #5f87af;">?</span><span style="color: #5f87d7;">!</span><span class="fg0" style="background: #5f87d7;">?</span><span style="color: #5f87ff;">!</span><span class="fg0" style="background: #5f87ff;">?</span><span style="color: #5faf00;">!</span><span class="fg0" style="background: #5faf00;">?</span><span style="color: #5faf5f;">!</span><span class="fg0" style="background: #5faf5f;">?</span><span style="color: #5faf87;">!</span><span class="fg0" style="background: #5faf87;">?</span><span style="color: #5fafaf;">!</span><span class="fg0" style="background: #5fafaf;">?</span><span style="color: #5fafd7;">!</span><span class="fg0" style="background: #5fafd7;">?</span><span style="color: #5fafff;">!</span><span class="fg0" style="background: #5fafff;">?</span><span style="color: #5fd700;">!</span><span class="fg0" style="background: #5fd700;">?</span><span style="color: #5fd75f;">!</span><span class="fg0" style="background: #5fd75f;">?</span><span style="color: #5fd787;">!</span><span class="fg0" style="background: #5fd787;">?</span><span style="color: #5fd7af;">!</span><span class="fg0" style="background: #5fd7af;">?</span><span style="color: #5fd7d7;">!</span><span class="fg0" style="background: #5fd7d7;">?</span><span style="color: #5fd7ff;">!</span><span class="fg0" style="background: #5fd7ff;">?</span><span style="color: #5fff00;">!</span><span class="fg0" style="background: #5fff00;">?</span><span style="color: #5fff5f;">!</span><span class="fg0" style="background: #5fff5f;">?</span><span style="color: #5fff87;">!</span><span class="fg0" style="background: #5fff87;">?</span><span style="color: #5fffaf;">!</span><span class="fg0" style="background: #5fffaf;">?</span><span style="color: #5fffd7;">!</span><span class="fg0" style="background: #5fffd7;">?</span><span style="color: #5fffff;">!</span><span class="fg0" style="background: #5fffff;">?</span>
<span style="color: #870000;">!</span><span class="fg7" style="background: #870000;">?</span><span style="color: #87005f;">!</span><span class="fg7" style="background: #87005f;">?</span><span style="color: #870087;">!</span><span class="fg7" style="background: #870087;">?</span><span style="color: #8700af;">!</span><span class="fg7" style="background: #8700af;">?</span><span style="color: #8700d7;">!</span><span class="fg7" style="background: #8700d7;">?</span><span style="color: #8700ff;">!</span><span class="fg7" style="background: #8700ff;">?</span><span style="color: #875f00;">!</span><span class="fg7" style="background: #875f00;">?</span><span style="color: #875f5f;">!</span><span class="fg7" style="background: #875f5f;">?</span><span style="color: #875f87;">!</span><span class="fg7" style="background: #875f87;">?</span><span style="color: #875faf;">!</span><span class="fg7" style="background: #875faf;">?</span><span style="color: #875fd7;">!</span><span class="fg7" style="background: #875fd7;">?</span><span style="color: #875fff;">!</span><span class="fg7" style="background: #875fff;">?</span><span style="color: #878700;">!</span><span class="fg7" style="background: #878700;">?</span><span style="color: #87875f;">!</span><span class="fg7" style="background: #87875f;">?</span><span style="color: #878787;">!</span><span class="fg7" style="background: #878787;">?</span><span style="color: #8787af;">!</span><span class="fg7" style="background: #8787af;">?</span><span style="color: #8787d7;">!</span><span class="fg0" style="background: #8787d7;">?</span><span style="color: #8787ff;">!</span><span class="fg0" style="background: #8787ff;">?</span><span style="color: #87af00;">!</span><span class="fg0" style="background: #87af00;">?</span><span style="color: #87af5f;">!</span><span class="fg0" style="background: #87af5f;">?</span><span style="color: #87af87;">!</span><span class="fg0" style="background: #87af87;">?</span><span style="color: #87afaf;">!</span><span class="fg0" style="background: #87afaf;">?</span><span style="color: #87afd7;">!</span><span class="fg0" style="background: #87afd7;">?</span><span style="color: #87afff;">!</span><span class="fg0" style="background: #87afff;">?</span><span style="color: #87d700;">!</span><span class="fg0" style="background: #87d700;">?</span><span style="color: #87d75f;">!</span><span class="fg0" style="background: #87d75f;">?</span><span style="color: #87d787;">!</span><span class="fg0" style="background: #87d787;">?</span><span style="color: #87d7af;">!</span><span class="fg0" style="background: #87d7af;">?</span><span style="color: #87d7d7;">!</span><span class="fg0" style="background: #87d7d7;">?</span><span style="color: #87d7ff;">!</span><span class="fg0" style="background: #87d7ff;">?</span><span style="color: #87ff00;">!</span><span class="fg0" style="background: #87ff00;">?</span><span style="color: #87ff5f;">!</span><span class="fg0" style="background: #87ff5f;">?</span><span style="color: #87ff87;">!</span><span class="fg0" style="background: #87ff87;">?</span><span style="color: #87ffaf;">!</span><span class="fg0" style="background: #87ffaf;">?</span><span style="color: #87ffd7;">!</span><span class="fg0" style="background: #87ffd7;">?</span><span style="color: #87ffff;">!</span><span class="fg0" style="background: #87ffff;">?</span>
<span style="color: #af0000;">!</span><span class="fg7" style="background: #af0000;">?</span><span style="color: #af005f;">!</span><span class="fg7" style="background: #af005f;">?</span><span style="color: #af0087;">!</span><span class="fg7" style="background: #af0087;">?</span><span style="color: #af00af;">!</span><span class="fg7" style="background: #af00af;">?</span><span style="color: #af00d7;">!</span><span class="fg7" style="background: #af00d7;">?</span><span style="color: #af00ff;">!</span><span class="fg7" style="background: #af00ff;">?</span><span style="color: #af5f00;">!</span><span class="fg7" style="background: #af5f00;">?</span><span style="color: #af5f5f;">!</span><span class="fg7" style="background: #af5f5f;">?</span><span style="color: #af5f87;">!</span><span class="fg7" style="background: #af5f87;">?</span><span style="color: #af5faf;">!</span><span class="fg7" style="background: #af5faf;">?</span><span style="color: #af5fd7;">!</span><span class="fg7" style="background: #af5fd7;">?</span><span style="color: #af5fff;">!</span><span class="fg7" style="background: #af5fff;">?</span><span style="color: #af8700;">!</span><span class="fg7" style="background: #af8700;">?</span><span style="color: #af875f;">!</span><span class="fg7" style="background: #af875f;">?</span><span style="color: #af8787;">!</span><span class="fg7" style="background: #af8787;">?</span><span style="color: #af87af;">!</span><span class="fg7" style="background: #af87af;">?</span><span style="color: #af87d7;">!</span><span class="fg0" style="background: #af87d7;">?</span><span style="color: #af87ff;">!</span><span class="fg0" style="background: #af87ff;">?</span><span style="color: #afaf00;">!</span><span class="fg0" style="background: #afaf00;">?</span><span style="color: #afaf5f;">!</span><span class="fg0" style="background: #afaf5f;">?</span><span style="color: #afaf87;">!</span><span class="fg0" style="background: #afaf87;">?</span><span style="color: #afafaf;">!</span><span class="fg0" style="background: #afafaf;">?</span><span style="color: #afafd7;">!</span><span class="fg0" style="background: #afafd7;">?</span><span style="color: #afafff;">!</span><span class="fg0" style="background: #afafff;">?</span><span style="color: #afd700;">!</span><span class="fg0" style="background: #afd700;">?</span><span style="color: #afd75f;">!</span><span class="fg0" style="background: #afd75f;">?</span><span style="color: #afd787;">!</span><span class="fg0" style="background: #afd787;">?</span><span style="color: #afd7af;">!</span><span class="fg0" style="background: #afd7af;">?</span><span style="color: #afd7d7;">!</span><span class="fg0" style="background: #afd7d7;">?</span><span style="color: #afd7ff;">!</span><span class="fg0" style="background: #afd7ff;">?</span><span style="color: #afff00;">!</span><span class="fg0" style="background: #afff00;">?</span><span style="color: #afff5f;">!</span><span class="fg0" style="background: #afff5f;">?</span><span style="color: #afff87;">!</span><span class="fg0" style="background: #afff87;">?</span><span style="color: #afffaf;">!</span><span class="fg0" style="background: #afffaf;">?</span><span style="color: #afffd7;">!</span><span class="fg0" style="background: #afffd7;">?</span><span style="color: #afffff;">!</span><span class="fg0" style="background: #afffff;">?</span>
<span style="color: #d70000;">!</span><span class="fg7" style="background: #d70000;">?</span><span style="color: #d7005f;">!</span><span class="fg7" style="background: #d7005f;">?</span><span style="color: #d70087;">!</span><span class="fg7" style="background: #d70087;">?</span><span style="color: #d700af;">!</span><span class="fg7" style="background: #d700af;">?</span><span style="color: #d700d7;">!</span><span class="fg7" style="background: #d700d7;">?</span><span style="color: #d700ff;">!</span><span class="fg7" style="background: #d700ff;">?</span><span style="color: #d75f00;">!</span><span class="fg7" style="background: #d75f00;">?</span><span style="color: #d75f5f;">!</span><span class="fg7" style="background: #d75f5f;">?</span><span style="color: #d75f87;">!</span><span class="fg7" style="background: #d75f87;">?</span><span style="color: #d75faf;">!</span><span class="fg7" style="background: #d75faf;">?</span><span style="color: #d75fd7;">!</span><span class="fg7" style="background: #d75fd7;">?</span><span style="color: #d75fff;">!</span><span class="fg7" style="background: #d75fff;">?</span><span style="color: #d78700;">!</span><span class="fg7" style="background: #d78700;">?</span><span style="color: #d7875f;">!</span><span class="fg7" style="background: #d7875f;">?</span><span style="color: #d78787;">!</span><span class="fg7" style="background: #d78787;">?</span><span style="color: #d787af;">!</span><span class="fg7" style="background: #d787af;">?</span><span style="color: #d787d7;">!</span><span class="fg0" style="background: #d787d7;">?</span><span style="color: #d787ff;">!</span><span class="fg0" style="background: #d787ff;">?</span><span style="color: #d7af00;">!</span><span class="fg0" style="background: #d7af00;">?</span><span style="color: #d7af5f;">!</span><span class="fg0" style="background: #d7af5f;">?</span><span style="color: #d7af87;">!</span><span class="fg0" style="background: #d7af87;">?</span><span style="color: #d7afaf;">!</span><span class="fg0" style="background: #d7afaf;">?</span><span style="color: #d7afd7;">!</span><span class="fg0" style="background: #d7afd7;">?</span><span style="color: #d7afff;">!</span><span class="fg0" style="background: #d7afff;">?</span><span style="color: #d7d700;">!</span><span class="fg0" style="background: #d7d700;">?</span><span style="color: #d7d75f;">!</span><span class="fg0" style="background: #d7d75f;">?</span><span style="color: #d7d787;">!</span><span class="fg0" style="background: #d7d787;">?</span><span style="color: #d7d7af;">!</span><span class="fg0" style="background: #d7d7af;">?</span><span style="color: #d7d7d7;">!</span><span class="fg0" style="background: #d7d7d7;">?</span><span style="color: #d7d7ff;">!</span><span class="fg0" style="background: #d7d7ff;">?</span><span style="color: #d7ff00;">!</span><span class="fg0" style="background: #d7ff00;">?</span><span style="color: #d7ff5f;">!</span><span class="fg0" style="background: #d7ff5f;">?</span><span style="color: #d7ff87;">!</span><span class="fg0" style="background: #d7ff87;">?</span><span style="color: #d7ffaf;">!</span><span class="fg0" style="background: #d7ffaf;">?</span><span style="color: #d7ffd7;">!</span><span class="fg0" style="background: #d7ffd7;">?</span><span style="color: #d7ffff;">!</span><span class="fg0" style="background: #d7ffff;">?</span>
<span style="color: #ff0000;">!</span><span class="fg7" style="background: #ff0000;">?</span><span style="color: #ff005f;">!</span><span class="fg7" style="background: #ff005f;">?</span><span style="color: #ff0087;">!</span><span class="fg7" style="background: #ff0087;">?</span><span style="color: #ff00af;">!</span><span class="fg7" style="background: #ff00af;">?</span><span style="color: #ff00d7;">!</span><span class="fg7" style="background: #ff00d7;">?</span><span style="color: #ff00ff;">!</span><span class="fg7" style="background: #ff00ff;">?</span><span style="color: #ff5f00;">!</span><span class="fg7" style="background: #ff5f00;">?</span><span style="color: #ff5f5f;">!</span><span class="fg7" style="background: #ff5f5f;">?</span><span style="color: #ff5f87;">!</span><span class="fg7" style="background: #ff5f87;">?</span><span style="color: #ff5faf;">!</span><span class="fg7" style="background: #ff5faf;">?</span><span style="color: #ff5fd7;">!</span><span class="fg7" style="background: #ff5fd7;">?</span><span style="color: #ff5fff;">!</span><span class="fg7" style="background: #ff5fff;">?</span><span style="color: #ff8700;">!</span><span class="fg7" style="background: #ff8700;">?</span><span style="color: #ff875f;">!</span><span class="fg7" style="background: #ff875f;">?</span><span style="color: #ff8787;">!</span><span class="fg7" style="background: #ff8787;">?</span><span style="color: #ff87af;">!</span><span class="fg7" style="background: #ff87af;">?</span><span style="color: #ff87d7;">!</span><span class="fg0" style="background: #ff87d7;">?</span><span style="color: #ff87ff;">!</span><span class="fg0" style="background: #ff87ff;">?</span><span style="color: #ffaf00;">!</span><span class="fg0" style="background: #ffaf00;">?</span><span style="color: #ffaf5f;">!</span><span class="fg0" style="background: #ffaf5f;">?</span><span style="color: #ffaf87;">!</span><span class="fg0" style="background: #ffaf87;">?</span><span style="color: #ffafaf;">!</span><span class="fg0" style="background: #ffafaf;">?</span><span style="color: #ffafd7;">!</span><span class="fg0" style="background: #ffafd7;">?</span><span style="color: #ffafff;">!</span><span class="fg0" style="background: #ffafff;">?</span><span style="color: #ffd700;">!</span><span class="fg0" style="background: #ffd700;">?</span><span style="color: #ffd75f;">!</span><span class="fg0" style="background: #ffd75f;">?</span><span style="color: #ffd787;">!</span><span class="fg0" style="background: #ffd787;">?</span><span style="color: #ffd7af;">!</span><span class="fg0" style="background: #ffd7af;">?</span><span style="color: #ffd7d7;">!</span><span class="fg0" style="background: #ffd7d7;">?</span><span style="color: #ffd7ff;">!</span><span class="fg0" style="background: #ffd7ff;">?</span><span style="color: #ffff00;">!</span><span class="fg0" style="background: #ffff00;">?</span><span style="color: #ffff5f;">!</span><span class="fg0" style="background: #ffff5f;">?</span><span style="color: #ffff87;">!</span><span class="fg0" style="background: #ffff87;">?</span><span style="color: #ffffaf;">!</span><span class="fg0" style="background: #ffffaf;">?</span><span style="color: #ffffd7;">!</span><span class="fg0" style="background: #ffffd7;">?</span><span style="color: #ffffff;">!</span><span class="fg0" style="background: #ffffff;">?</span>
ANSI grayscale palette:
<span style="color: #080808;">!</span><span class="bold fg7" style="background: #080808;">?</span><span style="color: #121212;">!</span><span class="bold fg7" style="background: #121212;">?</span><span style="color: #1c1c1c;">!</span><span class="bold fg7" style="background: #1c1c1c;">?</span><span style="color: #262626;">!</span><span class="bold fg7" style="background: #262626;">?</span><span style="color: #303030;">!</span><span class="bold fg7" style="background: #303030;">?</span><span style="color: #3a3a3a;">!</span><span class="bold fg7" style="background: #3a3a3a;">?</span><span style="color: #444444;">!</span><span class="bold fg7" style="background: #444444;">?</span><span style="color: #4e4e4e;">!</span><span class="bold fg7" style="background: #4e4e4e;">?</span><span style="color: #585858;">!</span><span class="bold fg7" style="background: #585858;">?</span><span style="color: #626262;">!</span><span class="bold fg7" style="background: #626262;">?</span><span style="color: #6c6c6c;">!</span><span class="bold fg7" style="background: #6c6c6c;">?</span><span style="color: #767676;">!</span><span class="bold fg7" style="background: #767676;">?</span><span style="color: #808080;">!</span><span class="bold fg0" style="background: #808080;">?</span><span style="color: #8a8a8a;">!</span><span class="bold fg0" style="background: #8a8a8a;">?</span><span style="color: #949494;">!</span><span class="bold fg0" style="background: #949494;">?</span><span style="color: #9e9e9e;">!</span><span class="bold fg0" style="background: #9e9e9e;">?</span><span style="color: #a8a8a8;">!</span><span class="bold fg0" style="background: #a8a8a8;">?</span><span style="color: #b2b2b2;">!</span><span class="bold fg0" style="background: #b2b2b2;">?</span><span style="color: #bcbcbc;">!</span><span class="bold fg0" style="background: #bcbcbc;">?</span><span style="color: #c6c6c6;">!</span><span class="bold fg0" style="background: #c6c6c6;">?</span><span style="color: #d0d0d0;">!</span><span class="bold fg0" style="background: #d0d0d0;">?</span><span style="color: #dadada;">!</span><span class="bold fg0" style="background: #dadada;">?</span><span style="color: #e4e4e4;">!</span><span class="bold fg0" style="background: #e4e4e4;">?</span><span style="color: #eeeeee;">!</span><span class="bold fg0" style="background: #eeeeee;">?</span>
24-bit colors:
<span style="color: #ffbbdd;">pink</span> <span style="color: #ffaa44;">orange</span> <span style="color: #9f4010;">brown</span> <span style="color: #10889f;">teal</span> </pre></div>
            <div class="user-input" data-exit-status="0"><pre><span class="prompt">$</span> rainbow --long-lines</pre></div>
            <div class="term-output"><pre>Base colors:
<span class="underline fg0">black</span> <span class="italic fg0">black/italic</span> <span class="fg4">blue</span> <span class="italic underline fg4">blue/italic</span> <span class="underline fg2">green</span> <span class="italic fg2">green/italic</span> <span class="fg1">red</span> <span class="italic underline fg1">red/italic</span> <span class="underline fg6">cyan</span> <span class="italic fg6">cyan/<b class="hard-br"><br/></b>italic</span> <span class="fg5">magenta</span> <span class="italic underline fg5">magenta/italic</span> <span class="underline fg3">yellow</span> <span class="italic fg3">yellow/italic</span> 
<span class="fg8">black</span> <span class="italic underline fg8">black/italic</span> <span class="underline fg12">blue</span> <span class="italic fg12">blue/italic</span> <span class="fg10">green</span> <span class="italic underline fg10">green/italic</span> <span class="underline fg9">red</span> <span class="italic fg9">red/italic</span> <span class="fg14">cyan</span> <span class="italic underline fg14">cyan/<b class="hard-br"><br/></b>italic</span> <span class="underline fg13">magenta</span> <span class="italic fg13">magenta/italic</span> <span class="fg11">yellow</span> <span class="italic underline fg11">yellow/italic</span> 
Base colors (bg):
<span class="fg7 bg0">black</span> <span class="fg7 bg4">blue</span> <span class="fg7 bg2">green</span> <span class="fg7 bg1">red</span> <span class="fg7 bg6">cyan</span> <span class="fg7 bg5">magenta</span> <span class="fg7 bg3">yellow</span> 
<span class="fg15 bg8">black</span> <span class="fg15 bg12">blue</span> <span class="fg15 bg10">green</span> <span class="fg15 bg9">red</span> <span class="fg15 bg14">cyan</span> <span class="fg15 bg13">magenta</span> <span class="fg15 bg11">yellow</span> 
ANSI color palette:
<span style="color: #000000;">!</span><span class="fg7" style="background: #000000;">?</span><span style="color: #00005f;">!</span><span class="fg7" style="background: #00005f;">?</span><span style="color: #000087;">!</span><span class="fg7" style="background: #000087;">?</span><span style="color: #0000af;">!</span><span class="fg7" style="background: #0000af;">?</span><span style="color: #0000d7;">!</span><span class="fg7" style="background: #0000d7;">?</span><span style="color: #0000ff;">!</span><span class="fg7" style="background: #0000ff;">?</span><span style="color: #005f00;">!</span><span class="fg7" style="background: #005f00;">?</span><span style="color: #005f5f;">!</span><span class="fg7" style="background: #005f5f;">?</span><span style="color: #005f87;">!</span><span class="fg7" style="background: #005f87;">?</span><span style="color: #005faf;">!</span><span class="fg7" style="background: #005faf;">?</span><span style="color: #005fd7;">!</span><span class="fg7" style="background: #005fd7;">?</span><span style="color: #005fff;">!</span><span class="fg7" style="background: #005fff;">?</span><span style="color: #008700;">!</span><span class="fg7" style="background: #008700;">?</span><span style="color: #00875f;">!</span><span class="fg7" style="background: #00875f;">?</span><span style="color: #008787;">!</span><span class="fg7" style="background: #008787;">?</span><span style="color: #0087af;">!</span><span class="fg7" style="background: #0087af;">?</span><span style="color: #0087d7;">!</span><span class="fg0" style="background: #0087d7;">?</span><span style="color: #0087ff;">!</span><span class="fg0" style="background: #0087ff;">?</span><span style="color: #00af00;">!</span><span class="fg0" style="background: #00af00;">?</span><span style="color: #00af5f;">!</span><span class="fg0" style="background: #00af5f;">?</span><span style="color: #00af87;">!</span><span class="fg0" style="background: #00af87;">?</span><span style="color: #00afaf;">!</span><span class="fg0" style="background: #00afaf;">?</span><span style="color: #00afd7;">!</span><span class="fg0" style="background: #00afd7;">?</span><span style="color: #00afff;">!</span><span class="fg0" style="background: #00afff;">?</span><span style="color: #00d700;">!</span><span class="fg0" style="background: #00d700;">?</span><span style="color: #00d75f;">!</span><span class="fg0" style="background: #00d75f;">?</span><span style="color: #00d787;">!</span><span class="fg0" style="background: #00d787;">?</span><span style="color: #00d7af;">!</span><span class="fg0" style="background: #00d7af;">?</span><span style="color: #00d7d7;">!</span><span class="fg0" style="background: #00d7d7;">?</span><span style="color: #00d7ff;">!</span><span class="fg0" style="background: #00d7ff;">?</span><span style="color: #00ff00;">!</span><span class="fg0" style="background: #00ff00;">?</span><span style="color: #00ff5f;">!</span><span class="fg0" style="background: #00ff5f;">?</span><span style="color: #00ff87;">!</span><span class="fg0" style="background: #00ff87;">?</span><span style="color: #00ffaf;">!</span><span class="fg0" style="background: #00ffaf;">?</span><span style="color: #00ffd7;">!</span><span class="fg0" style="background: #00ffd7;">?</span><span style="color: #00ffff;">!</span><span class="fg0" style="background: #00ffff;">?</span><span style="color: #5f0000;">!</span><span class="fg7" style="background: #5f0000;">?</span><span style="color: #5f005f;">!</span><span class="fg7" style="background: #5f005f;">?</span><span style="color: #5f0087;">!</span><span class="fg7" style="background: #5f0087;">?</span><span style="color: #5f00af;">!</span><span class="fg7" style="background: #5f00af;">?</span><span style="color: #5f00d7;"><b class="hard-br"><br/></b>!</span><span class="fg7" style="background: #5f00d7;">?</span><span style="color: #5f00ff;">!</span><span class="fg7" style="background: #5f00ff;">?</span><span style="color: #5f5f00;">!</span><span class="fg7" style="background: #5f5f00;">?</span><span style="color: #5f5f5f;">!</span><span class="fg7" style="background: #5f5f5f;">?</span><span style="color: #5f5f87;">!</span><span class="fg7" style="background: #5f5f87;">?</span><span style="color: #5f5faf;">!</span><span class="fg7" style="background: #5f5faf;">?</span><span style="color: #5f5fd7;">!</span><span class="fg7" style="background: #5f5fd7;">?</span><span style="color: #5f5fff;">!</span><span class="fg7" style="background: #5f5fff;">?</span><span style="color: #5f8700;">!</span><span class="fg7" style="background: #5f8700;">?</span><span style="color: #5f875f;">!</span><span class="fg7" style="background: #5f875f;">?</span><span style="color: #5f8787;">!</span><span class="fg7" style="background: #5f8787;">?</span><span style="color: #5f87af;">!</span><span class="fg7" style="background: #5f87af;">?</span><span style="color: #5f87d7;">!</span><span class="fg0" style="background: #5f87d7;">?</span><span style="color: #5f87ff;">!</span><span class="fg0" style="background: #5f87ff;">?</span><span style="color: #5faf00;">!</span><span class="fg0" style="background: #5faf00;">?</span><span style="color: #5faf5f;">!</span><span class="fg0" style="background: #5faf5f;">?</span><span style="color: #5faf87;">!</span><span class="fg0" style="background: #5faf87;">?</span><span style="color: #5fafaf;">!</span><span class="fg0" style="background: #5fafaf;">?</span><span style="color: #5fafd7;">!</span><span class="fg0" style="background: #5fafd7;">?</span><span style="color: #5fafff;">!</span><span class="fg0" style="background: #5fafff;">?</span><span style="color: #5fd700;">!</span><span class="fg0" style="background: #5fd700;">?</span><span style="color: #5fd75f;">!</span><span class="fg0" style="background: #5fd75f;">?</span><span style="color: #5fd787;">!</span><span class="fg0" style="background: #5fd787;">?</span><span style="color: #5fd7af;">!</span><span class="fg0" style="background: #5fd7af;">?</span><span style="color: #5fd7d7;">!</span><span class="fg0" style="background: #5fd7d7;">?</span><span style="color: #5fd7ff;">!</span><span class="fg0" style="background: #5fd7ff;">?</span><span style="color: #5fff00;">!</span><span class="fg0" style="background: #5fff00;">?</span><span style="color: #5fff5f;">!</span><span class="fg0" style="background: #5fff5f;">?</span><span style="color: #5fff87;">!</span><span class="fg0" style="background: #5fff87;">?</span><span style="color: #5fffaf;">!</span><span class="fg0" style="background: #5fffaf;">?</span><span style="color: #5fffd7;">!</span><span class="fg0" style="background: #5fffd7;">?</span><span style="color: #5fffff;">!</span><span class="fg0" style="background: #5fffff;">?</span><span style="color: #870000;">!</span><span class="fg7" style="background: #870000;">?</span><span style="color: #87005f;">!</span><span class="fg7" style="background: #87005f;">?</span><span style="color: #870087;">!</span><span class="fg7" style="background: #870087;">?</span><span style="color: #8700af;">!</span><span class="fg7" style="background: #8700af;">?</span><span style="color: #8700d7;">!</span><span class="fg7" style="background: #8700d7;">?</span><span style="color: #8700ff;">!</span><span class="fg7" style="background: #8700ff;">?</span><span style="color: #875f00;">!</span><span class="fg7" style="background: #875f00;">?</span><span style="color: #875f5f;">!</span><span class="fg7" style="background: #875f5f;">?</span><span style="color: #875f87;"><b class="hard-br"><br/></b>!</span><span class="fg7" style="background: #875f87;">?</span><span style="color: #875faf;">!</span><span class="fg7" style="background: #875faf;">?</span><span style="color: #875fd7;">!</span><span class="fg7" style="background: #875fd7;">?</span><span style="color: #875fff;">!</span><span class="fg7" style="background: #875fff;">?</span><span style="color: #878700;">!</span><span class="fg7" style="background: #878700;">?</span><span style="color: #87875f;">!</span><span class="fg7" style="background: #87875f;">?</span><span style="color: #878787;">!</span><span class="fg7" style="background: #878787;">?</span><span style="color: #8787af;">!</span><span class="fg7" style="background: #8787af;">?</span><span style="color: #8787d7;">!</span><span class="fg0" style="background: #8787d7;">?</span><span style="color: #8787ff;">!</span><span class="fg0" style="background: #8787ff;">?</span><span style="color: #87af00;">!</span><span class="fg0" style="background: #87af00;">?</span><span style="color: #87af5f;">!</span><span class="fg0" style="background: #87af5f;">?</span><span style="color: #87af87;">!</span><span class="fg0" style="background: #87af87;">?</span><span style="color: #87afaf;">!</span><span class="fg0" style="background: #87afaf;">?</span><span style="color: #87afd7;">!</span><span class="fg0" style="background: #87afd7;">?</span><span style="color: #87afff;">!</span><span class="fg0" style="background: #87afff;">?</span><span style="color: #87d700;">!</span><span class="fg0" style="background: #87d700;">?</span><span style="color: #87d75f;">!</span><span class="fg0" style="background: #87d75f;">?</span><span style="color: #87d787;">!</span><span class="fg0" style="background: #87d787;">?</span><span style="color: #87d7af;">!</span><span class="fg0" style="background: #87d7af;">?</span><span style="color: #87d7d7;">!</span><span class="fg0" style="background: #87d7d7;">?</span><span style="color: #87d7ff;">!</span><span class="fg0" style="background: #87d7ff;">?</span><span style="color: #87ff00;">!</span><span class="fg0" style="background: #87ff00;">?</span><span style="color: #87ff5f;">!</span><span class="fg0" style="background: #87ff5f;">?</span><span style="color: #87ff87;">!</span><span class="fg0" style="background: #87ff87;">?</span><span style="color: #87ffaf;">!</span><span class="fg0" style="background: #87ffaf;">?</span><span style="color: #87ffd7;">!</span><span class="fg0" style="background: #87ffd7;">?</span><span style="color: #87ffff;">!</span><span class="fg0" style="background: #87ffff;">?</span><span style="color: #af0000;">!</span><span class="fg7" style="background: #af0000;">?</span><span style="color: #af005f;">!</span><span class="fg7" style="background: #af005f;">?</span><span style="color: #af0087;">!</span><span class="fg7" style="background: #af0087;">?</span><span style="color: #af00af;">!</span><span class="fg7" style="background: #af00af;">?</span><span style="color: #af00d7;">!</span><span class="fg7" style="background: #af00d7;">?</span><span style="color: #af00ff;">!</span><span class="fg7" style="background: #af00ff;">?</span><span style="color: #af5f00;">!</span><span class="fg7" style="background: #af5f00;">?</span><span style="color: #af5f5f;">!</span><span class="fg7" style="background: #af5f5f;">?</span><span style="color: #af5f87;">!</span><span class="fg7" style="background: #af5f87;">?</span><span style="color: #af5faf;">!</span><span class="fg7" style="background: #af5faf;">?</span><span style="color: #af5fd7;">!</span><span class="fg7" style="background: #af5fd7;">?</span><span style="color: #af5fff;">!</span><span class="fg7" style="background: #af5fff;">?</span><span style="color: #af8700;"><b class="hard-br"><br/></b>!</span><span class="fg7" style="background: #af8700;">?</span><span style="color: #af875f;">!</span><span class="fg7" style="background: #af875f;">?</span><span style="color: #af8787;">!</span><span class="fg7" style="background: #af8787;">?</span><span style="color: #af87af;">!</span><span class="fg7" style="background: #af87af;">?</span><span style="color: #af87d7;">!</span><span class="fg0" style="background: #af87d7;">?</span><span style="color: #af87ff;">!</span><span class="fg0" style="background: #af87ff;">?</span><span style="color: #afaf00;">!</span><span class="fg0" style="background: #afaf00;">?</span><span style="color: #afaf5f;">!</span><span class="fg0" style="background: #afaf5f;">?</span><span style="color: #afaf87;">!</span><span class="fg0" style="background: #afaf87;">?</span><span style="color: #afafaf;">!</span><span class="fg0" style="background: #afafaf;">?</span><span style="color: #afafd7;">!</span><span class="fg0" style="background: #afafd7;">?</span><span style="color: #afafff;">!</span><span class="fg0" style="background: #afafff;">?</span><span style="color: #afd700;">!</span><span class="fg0" style="background: #afd700;">?</span><span style="color: #afd75f;">!</span><span class="fg0" style="background: #afd75f;">?</span><span style="color: #afd787;">!</span><span class="fg0" style="background: #afd787;">?</span><span style="color: #afd7af;">!</span><span class="fg0" style="background: #afd7af;">?</span><span style="color: #afd7d7;">!</span><span class="fg0" style="background: #afd7d7;">?</span><span style="color: #afd7ff;">!</span><span class="fg0" style="background: #afd7ff;">?</span><span style="color: #afff00;">!</span><span class="fg0" style="background: #afff00;">?</span><span style="color: #afff5f;">!</span><span class="fg0" style="background: #afff5f;">?</span><span style="color: #afff87;">!</span><span class="fg0" style="background: #afff87;">?</span><span style="color: #afffaf;">!</span><span class="fg0" style="background: #afffaf;">?</span><span style="color: #afffd7;">!</span><span class="fg0" style="background: #afffd7;">?</span><span style="color: #afffff;">!</span><span class="fg0" style="background: #afffff;">?</span><span style="color: #d70000;">!</span><span class="fg7" style="background: #d70000;">?</span><span style="color: #d7005f;">!</span><span class="fg7" style="background: #d7005f;">?</span><span style="color: #d70087;">!</span><span class="fg7" style="background: #d70087;">?</span><span style="color: #d700af;">!</span><span class="fg7" style="background: #d700af;">?</span><span style="color: #d700d7;">!</span><span class="fg7" style="background: #d700d7;">?</span><span style="color: #d700ff;">!</span><span class="fg7" style="background: #d700ff;">?</span><span style="color: #d75f00;">!</span><span class="fg7" style="background: #d75f00;">?</span><span style="color: #d75f5f;">!</span><span class="fg7" style="background: #d75f5f;">?</span><span style="color: #d75f87;">!</span><span class="fg7" style="background: #d75f87;">?</span><span style="color: #d75faf;">!</span><span class="fg7" style="background: #d75faf;">?</span><span style="color: #d75fd7;">!</span><span class="fg7" style="background: #d75fd7;">?</span><span style="color: #d75fff;">!</span><span class="fg7" style="background: #d75fff;">?</span><span style="color: #d78700;">!</span><span class="fg7" style="background: #d78700;">?</span><span style="color: #d7875f;">!</span><span class="fg7" style="background: #d7875f;">?</span><span style="color: #d78787;">!</span><span class="fg7" style="background: #d78787;">?</span><span style="color: #d787af;">!</span><span class="fg7" style="background: #d787af;">?</span><span style="color: #d787d7;"><b class="hard-br"><br/></b>!</span><span class="fg0" style="background: #d787d7;">?</span><span style="color: #d787ff;">!</span><span class="fg0" style="background: #d787ff;">?</span><span style="color: #d7af00;">!</span><span class="fg0" style="background: #d7af00;">?</span><span style="color: #d7af5f;">!</span><span class="fg0" style="background: #d7af5f;">?</span><span style="color: #d7af87;">!</span><span class="fg0" style="background: #d7af87;">?</span><span style="color: #d7afaf;">!</span><span class="fg0" style="background: #d7afaf;">?</span><span style="color: #d7afd7;">!</span><span class="fg0" style="background: #d7afd7;">?</span><span style="color: #d7afff;">!</span><span class="fg0" style="background: #d7afff;">?</span><span style="color: #d7d700;">!</span><span class="fg0" style="background: #d7d700;">?</span><span style="color: #d7d75f;">!</span><span class="fg0" style="background: #d7d75f;">?</span><span style="color: #d7d787;">!</span><span class="fg0" style="background: #d7d787;">?</span><span style="color: #d7d7af;">!</span><span class="fg0" style="background: #d7d7af;">?</span><span style="color: #d7d7d7;">!</span><span class="fg0" style="background: #d7d7d7;">?</span><span style="color: #d7d7ff;">!</span><span class="fg0" style="background: #d7d7ff;">?</span><span style="color: #d7ff00;">!</span><span class="fg0" style="background: #d7ff00;">?</span><span style="color: #d7ff5f;">!</span><span class="fg0" style="background: #d7ff5f;">?</span><span style="color: #d7ff87;">!</span><span class="fg0" style="background: #d7ff87;">?</span><span style="color: #d7ffaf;">!</span><span class="fg0" style="background: #d7ffaf;">?</span><span style="color: #d7ffd7;">!</span><span class="fg0" style="background: #d7ffd7;">?</span><span style="color: #d7ffff;">!</span><span class="fg0" style="background: #d7ffff;">?</span><span style="color: #ff0000;">!</span><span class="fg7" style="background: #ff0000;">?</span><span style="color: #ff005f;">!</span><span class="fg7" style="background: #ff005f;">?</span><span style="color: #ff0087;">!</span><span class="fg7" style="background: #ff0087;">?</span><span style="color: #ff00af;">!</span><span class="fg7" style="background: #ff00af;">?</span><span style="color: #ff00d7;">!</span><span class="fg7" style="background: #ff00d7;">?</span><span style="color: #ff00ff;">!</span><span class="fg7" style="background: #ff00ff;">?</span><span style="color: #ff5f00;">!</span><span class="fg7" style="background: #ff5f00;">?</span><span style="color: #ff5f5f;">!</span><span class="fg7" style="background: #ff5f5f;">?</span><span style="color: #ff5f87;">!</span><span class="fg7" style="background: #ff5f87;">?</span><span style="color: #ff5faf;">!</span><span class="fg7" style="background: #ff5faf;">?</span><span style="color: #ff5fd7;">!</span><span class="fg7" style="background: #ff5fd7;">?</span><span style="color: #ff5fff;">!</span><span class="fg7" style="background: #ff5fff;">?</span><span style="color: #ff8700;">!</span><span class="fg7" style="background: #ff8700;">?</span><span style="color: #ff875f;">!</span><span class="fg7" style="background: #ff875f;">?</span><span style="color: #ff8787;">!</span><span class="fg7" style="background: #ff8787;">?</span><span style="color: #ff87af;">!</span><span class="fg7" style="background: #ff87af;">?</span><span style="color: #ff87d7;">!</span><span class="fg0" style="background: #ff87d7;">?</span><span style="color: #ff87ff;">!</span><span class="fg0" style="background: #ff87ff;">?</span><span style="color: #ffaf00;">!</span><span class="fg0" style="background: #ffaf00;">?</span><span style="color: #ffaf5f;">!</span><span class="fg0" style="background: #ffaf5f;">?</span><span style="color: #ffaf87;"><b class="hard-br"><br/></b>!</span><span class="fg0" style="background: #ffaf87;">?</span><span style="color: #ffafaf;">!</span><span class="fg0" style="background: #ffafaf;">?</span><span style="color: #ffafd7;">!</span><span class="fg0" style="background: #ffafd7;">?</span><span style="color: #ffafff;">!</span><span class="fg0" style="background: #ffafff;">?</span><span style="color: #ffd700;">!</span><span class="fg0" style="background: #ffd700;">?</span><span style="color: #ffd75f;">!</span><span class="fg0" style="background: #ffd75f;">?</span><span style="color: #ffd787;">!</span><span class="fg0" style="background: #ffd787;">?</span><span style="color: #ffd7af;">!</span><span class="fg0" style="background: #ffd7af;">?</span><span style="color: #ffd7d7;">!</span><span class="fg0" style="background: #ffd7d7;">?</span><span style="color: #ffd7ff;">!</span><span class="fg0" style="background: #ffd7ff;">?</span><span style="color: #ffff00;">!</span><span class="fg0" style="background: #ffff00;">?</span><span style="color: #ffff5f;">!</span><span class="fg0" style="background: #ffff5f;">?</span><span style="color: #ffff87;">!</span><span class="fg0" style="background: #ffff87;">?</span><span style="color: #ffffaf;">!</span><span class="fg0" style="background: #ffffaf;">?</span><span style="color: #ffffd7;">!</span><span class="fg0" style="background: #ffffd7;">?</span><span style="color: #ffffff;">!</span><span class="fg0" style="background: #ffffff;">?</span>
ANSI grayscale palette:
<span style="color: #080808;">!</span><span class="bold fg7" style="background: #080808;">?</span><span style="color: #121212;">!</span><span class="bold fg7" style="background: #121212;">?</span><span style="color: #1c1c1c;">!</span><span class="bold fg7" style="background: #1c1c1c;">?</span><span style="color: #262626;">!</span><span class="bold fg7" style="background: #262626;">?</span><span style="color: #303030;">!</span><span class="bold fg7" style="background: #303030;">?</span><span style="color: #3a3a3a;">!</span><span class="bold fg7" style="background: #3a3a3a;">?</span><span style="color: #444444;">!</span><span class="bold fg7" style="background: #444444;">?</span><span style="color: #4e4e4e;">!</span><span class="bold fg7" style="background: #4e4e4e;">?</span><span style="color: #585858;">!</span><span class="bold fg7" style="background: #585858;">?</span><span style="color: #626262;">!</span><span class="bold fg7" style="background: #626262;">?</span><span style="color: #6c6c6c;">!</span><span class="bold fg7" style="background: #6c6c6c;">?</span><span style="color: #767676;">!</span><span class="bold fg7" style="background: #767676;">?</span><span style="color: #808080;">!</span><span class="bold fg0" style="background: #808080;">?</span><span style="color: #8a8a8a;">!</span><span class="bold fg0" style="background: #8a8a8a;">?</span><span style="color: #949494;">!</span><span class="bold fg0" style="background: #949494;">?</span><span style="color: #9e9e9e;">!</span><span class="bold fg0" style="background: #9e9e9e;">?</span><span style="color: #a8a8a8;">!</span><span class="bold fg0" style="background: #a8a8a8;">?</span><span style="color: #b2b2b2;">!</span><span class="bold fg0" style="background: #b2b2b2;">?</span><span style="color: #bcbcbc;">!</span><span class="bold fg0" style="background: #bcbcbc;">?</span><span style="color: #c6c6c6;">!</span><span class="bold fg0" style="background: #c6c6c6;">?</span><span style="color: #d0d0d0;">!</span><span class="bold fg0" style="background: #d0d0d0;">?</span><span style="color: #dadada;">!</span><span class="bold fg0" style="background: #dadada;">?</span><span style="color: #e4e4e4;">!</span><span class="bold fg0" style="background: #e4e4e4;">?</span><span style="color: #eeeeee;">!</span><span class="bold fg0" style="background: #eeeeee;">?</span>
24-bit colors:
<span style="color: #ffbbdd;">pink</span> <span style="color: #ffaa44;">orange</span> <span style="color: #9f4010;">brown</span> <span style="color: #10889f;">teal</span> </pre></div>
          </div>
        </foreignObject>
      </svg>
      <rect class="scrollbar" x="713" y="10" width="5" height="40">
        <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;0 37;0 75;0 113;0 151;0 188;0 226;0 264;0 302" dur="32.0s" repeatCount="indefinite" calcMode="discrete" />
      </rect>
    </g>
    <text x="10" y="18" style="font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; fill: #c50f1f;">
      HTML embedding not supported.
      Consult <tspan style="text-decoration: underline; text-decoration-thickness: 1px;"><a href="https://github.com/slowli/term-transcript/blob/HEAD/FAQ.md">term-transcript docs</a></tspan> for details.
    </text>
  </switch>
</svg>