docs/img/gradient_with_color_2.svg

<svg class="rich-terminal" viewBox="0 0 994 147.6" xmlns="http://www.w3.org/2000/svg">
    <!-- Generated with Rich https://www.textualize.io -->
    <style>

    @font-face {
        font-family: "Fira Code";
        src: local("FiraCode-Regular"),
                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
        font-style: normal;
        font-weight: 400;
    }
    @font-face {
        font-family: "Fira Code";
        src: local("FiraCode-Bold"),
                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
        font-style: bold;
        font-weight: 700;
    }

    .terminal-2176793299-matrix {
        font-family: Fira Code, monospace;
        font-size: 20px;
        line-height: 24.4px;
        font-variant-east-asian: full-width;
    }

    .terminal-2176793299-title {
        font-size: 18px;
        font-weight: bold;
        font-family: arial;
    }

    .terminal-2176793299-r1 { fill: #fafafa }
.terminal-2176793299-r2 { fill: #af00ff;font-weight: bold }
.terminal-2176793299-r3 { fill: #ab00ff;font-weight: bold }
.terminal-2176793299-r4 { fill: #a700ff;font-weight: bold }
.terminal-2176793299-r5 { fill: #a300ff;font-weight: bold }
.terminal-2176793299-r6 { fill: #9f00ff;font-weight: bold }
.terminal-2176793299-r7 { fill: #9b00ff;font-weight: bold }
.terminal-2176793299-r8 { fill: #9700ff;font-weight: bold }
.terminal-2176793299-r9 { fill: #9300ff;font-weight: bold }
.terminal-2176793299-r10 { fill: #8f00ff;font-weight: bold }
.terminal-2176793299-r11 { fill: #8b00ff;font-weight: bold }
.terminal-2176793299-r12 { fill: #8700ff;font-weight: bold }
.terminal-2176793299-r13 { fill: #8300ff;font-weight: bold }
.terminal-2176793299-r14 { fill: #7f00ff;font-weight: bold }
.terminal-2176793299-r15 { fill: #7b00ff;font-weight: bold }
.terminal-2176793299-r16 { fill: #7700ff;font-weight: bold }
.terminal-2176793299-r17 { fill: #7300ff;font-weight: bold }
.terminal-2176793299-r18 { fill: #6f00ff;font-weight: bold }
.terminal-2176793299-r19 { fill: #6b00ff;font-weight: bold }
.terminal-2176793299-r20 { fill: #6700ff;font-weight: bold }
.terminal-2176793299-r21 { fill: #6300ff;font-weight: bold }
.terminal-2176793299-r22 { fill: #5f00ff;font-weight: bold }
.terminal-2176793299-r23 { fill: #5a00ff;font-weight: bold }
.terminal-2176793299-r24 { fill: #5500ff;font-weight: bold }
.terminal-2176793299-r25 { fill: #5000ff;font-weight: bold }
.terminal-2176793299-r26 { fill: #4b00ff;font-weight: bold }
.terminal-2176793299-r27 { fill: #4600ff;font-weight: bold }
.terminal-2176793299-r28 { fill: #4100ff;font-weight: bold }
.terminal-2176793299-r29 { fill: #3c00ff;font-weight: bold }
.terminal-2176793299-r30 { fill: #3700ff;font-weight: bold }
.terminal-2176793299-r31 { fill: #3200ff;font-weight: bold }
.terminal-2176793299-r32 { fill: #2d00ff;font-weight: bold }
.terminal-2176793299-r33 { fill: #2800ff;font-weight: bold }
.terminal-2176793299-r34 { fill: #2300ff;font-weight: bold }
.terminal-2176793299-r35 { fill: #1e00ff;font-weight: bold }
.terminal-2176793299-r36 { fill: #1900ff;font-weight: bold }
.terminal-2176793299-r37 { fill: #1400ff;font-weight: bold }
.terminal-2176793299-r38 { fill: #0f00ff;font-weight: bold }
.terminal-2176793299-r39 { fill: #0a00ff;font-weight: bold }
.terminal-2176793299-r40 { fill: #0500ff;font-weight: bold }
.terminal-2176793299-r41 { fill: #0000ff;font-weight: bold }
.terminal-2176793299-r42 { fill: #0007ff;font-weight: bold }
.terminal-2176793299-r43 { fill: #000eff;font-weight: bold }
.terminal-2176793299-r44 { fill: #0015ff;font-weight: bold }
.terminal-2176793299-r45 { fill: #001cff;font-weight: bold }
.terminal-2176793299-r46 { fill: #0023ff;font-weight: bold }
.terminal-2176793299-r47 { fill: #002aff;font-weight: bold }
.terminal-2176793299-r48 { fill: #0032ff;font-weight: bold }
.terminal-2176793299-r49 { fill: #0039ff;font-weight: bold }
.terminal-2176793299-r50 { fill: #0040ff;font-weight: bold }
.terminal-2176793299-r51 { fill: #0047ff;font-weight: bold }
.terminal-2176793299-r52 { fill: #004eff;font-weight: bold }
.terminal-2176793299-r53 { fill: #0055ff;font-weight: bold }
.terminal-2176793299-r54 { fill: #005dff;font-weight: bold }
.terminal-2176793299-r55 { fill: #0064ff;font-weight: bold }
.terminal-2176793299-r56 { fill: #006bff;font-weight: bold }
.terminal-2176793299-r57 { fill: #0072ff;font-weight: bold }
.terminal-2176793299-r58 { fill: #0079ff;font-weight: bold }
.terminal-2176793299-r59 { fill: #0080ff;font-weight: bold }
.terminal-2176793299-r60 { fill: #0088ff;font-weight: bold }
.terminal-2176793299-r61 { fill: #008eff;font-weight: bold }
.terminal-2176793299-r62 { fill: #0094ff;font-weight: bold }
.terminal-2176793299-r63 { fill: #009aff;font-weight: bold }
.terminal-2176793299-r64 { fill: #00a1ff;font-weight: bold }
.terminal-2176793299-r65 { fill: #00a7ff;font-weight: bold }
.terminal-2176793299-r66 { fill: #00adff;font-weight: bold }
.terminal-2176793299-r67 { fill: #00b3ff;font-weight: bold }
.terminal-2176793299-r68 { fill: #00baff;font-weight: bold }
.terminal-2176793299-r69 { fill: #00c0ff;font-weight: bold }
.terminal-2176793299-r70 { fill: #00c6ff;font-weight: bold }
.terminal-2176793299-r71 { fill: #00ccff;font-weight: bold }
.terminal-2176793299-r72 { fill: #00d3ff;font-weight: bold }
.terminal-2176793299-r73 { fill: #00d9ff;font-weight: bold }
.terminal-2176793299-r74 { fill: #00dfff;font-weight: bold }
.terminal-2176793299-r75 { fill: #00e5ff;font-weight: bold }
.terminal-2176793299-r76 { fill: #00ecff;font-weight: bold }
.terminal-2176793299-r77 { fill: #00f2ff;font-weight: bold }
.terminal-2176793299-r78 { fill: #00f8ff;font-weight: bold }
    </style>

    <defs>
    <clipPath id="terminal-2176793299-clip-terminal">
      <rect x="0" y="0" width="975.0" height="96.6" />
    </clipPath>
    <clipPath id="terminal-2176793299-line-0">
    <rect x="0" y="1.5" width="976" height="24.65"/> 
            </clipPath>
<clipPath id="terminal-2176793299-line-1">
    <rect x="0" y="25.9" width="976" height="24.65"/> 
            </clipPath>
<clipPath id="terminal-2176793299-line-2">
    <rect x="0" y="50.3" width="976" height="24.65"/> 
            </clipPath>
    </defs>

    <rect fill="#232323" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="145.6" rx="8"/><text class="terminal-2176793299-title" fill="#fafafa" text-anchor="middle" x="496" y="27">Example&#160;2&#160;Result</text>
            <g transform="translate(26,22)">
            <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
            <circle cx="22" cy="0" r="7" fill="#febc2e"/>
            <circle cx="44" cy="0" r="7" fill="#28c840"/>
            </g>
        
    <g transform="translate(9, 41)" clip-path="url(#terminal-2176793299-clip-terminal)">
    
    <g class="terminal-2176793299-matrix">
    <text class="terminal-2176793299-r1" x="976" y="20" textLength="12.2" clip-path="url(#terminal-2176793299-line-0)">
</text><text class="terminal-2176793299-r2" x="12.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">T</text><text class="terminal-2176793299-r3" x="24.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">h</text><text class="terminal-2176793299-r4" x="36.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">i</text><text class="terminal-2176793299-r5" x="48.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">s</text><text class="terminal-2176793299-r7" x="73.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">g</text><text class="terminal-2176793299-r8" x="85.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">r</text><text class="terminal-2176793299-r9" x="97.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">a</text><text class="terminal-2176793299-r10" x="109.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">d</text><text class="terminal-2176793299-r11" x="122" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">i</text><text class="terminal-2176793299-r12" x="134.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">e</text><text class="terminal-2176793299-r13" x="146.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">n</text><text class="terminal-2176793299-r14" x="158.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">t</text><text class="terminal-2176793299-r16" x="183" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">c</text><text class="terminal-2176793299-r17" x="195.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">o</text><text class="terminal-2176793299-r18" x="207.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">n</text><text class="terminal-2176793299-r19" x="219.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">t</text><text class="terminal-2176793299-r20" x="231.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">a</text><text class="terminal-2176793299-r21" x="244" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">i</text><text class="terminal-2176793299-r22" x="256.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">n</text><text class="terminal-2176793299-r23" x="268.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">s</text><text class="terminal-2176793299-r25" x="292.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">t</text><text class="terminal-2176793299-r26" x="305" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">h</text><text class="terminal-2176793299-r27" x="317.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">e</text><text class="terminal-2176793299-r29" x="341.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">c</text><text class="terminal-2176793299-r30" x="353.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">o</text><text class="terminal-2176793299-r31" x="366" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">l</text><text class="terminal-2176793299-r32" x="378.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">o</text><text class="terminal-2176793299-r33" x="390.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">r</text><text class="terminal-2176793299-r34" x="402.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">s</text><text class="terminal-2176793299-r35" x="414.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">:</text><text class="terminal-2176793299-r37" x="439.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">v</text><text class="terminal-2176793299-r38" x="451.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">i</text><text class="terminal-2176793299-r39" x="463.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">o</text><text class="terminal-2176793299-r40" x="475.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">l</text><text class="terminal-2176793299-r41" x="488" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">e</text><text class="terminal-2176793299-r42" x="500.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">t</text><text class="terminal-2176793299-r43" x="512.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">,</text><text class="terminal-2176793299-r45" x="536.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">p</text><text class="terminal-2176793299-r46" x="549" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">u</text><text class="terminal-2176793299-r47" x="561.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">r</text><text class="terminal-2176793299-r48" x="573.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">p</text><text class="terminal-2176793299-r49" x="585.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">l</text><text class="terminal-2176793299-r50" x="597.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">e</text><text class="terminal-2176793299-r51" x="610" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">,</text><text class="terminal-2176793299-r53" x="634.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">b</text><text class="terminal-2176793299-r54" x="646.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">l</text><text class="terminal-2176793299-r55" x="658.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">u</text><text class="terminal-2176793299-r56" x="671" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">e</text><text class="terminal-2176793299-r57" x="683.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">,</text><text class="terminal-2176793299-r59" x="707.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">l</text><text class="terminal-2176793299-r60" x="719.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">i</text><text class="terminal-2176793299-r61" x="732" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">g</text><text class="terminal-2176793299-r62" x="744.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">h</text><text class="terminal-2176793299-r63" x="756.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">t</text><text class="terminal-2176793299-r64" x="768.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">b</text><text class="terminal-2176793299-r65" x="780.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">l</text><text class="terminal-2176793299-r66" x="793" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">u</text><text class="terminal-2176793299-r67" x="805.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">e</text><text class="terminal-2176793299-r68" x="817.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">,</text><text class="terminal-2176793299-r70" x="841.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">a</text><text class="terminal-2176793299-r71" x="854" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">n</text><text class="terminal-2176793299-r72" x="866.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">d</text><text class="terminal-2176793299-r74" x="890.6" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">c</text><text class="terminal-2176793299-r75" x="902.8" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">y</text><text class="terminal-2176793299-r76" x="915" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">a</text><text class="terminal-2176793299-r77" x="927.2" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">n</text><text class="terminal-2176793299-r78" x="939.4" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">.</text><text class="terminal-2176793299-r1" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-2176793299-line-1)">
</text><text class="terminal-2176793299-r1" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-2176793299-line-2)">
</text><text class="terminal-2176793299-r1" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-2176793299-line-3)">
</text>
    </g>
    </g>
</svg>