docs/animations/password_bar.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 960 87" width="960" version="1.1">
    <defs>
        <termtosvg:template_settings xmlns:termtosvg="https://github.com/nbedos/termtosvg">
            <termtosvg:screen_geometry columns="120" rows="5"/>
            <termtosvg:animation type="css"/>
        </termtosvg:template_settings>
        <style type="text/css" id="generated-style"><![CDATA[#screen {
                font-family: 'DejaVu Sans Mono', monospace;
                font-style: normal;
                font-size: 14px;
            }

        text {
            dominant-baseline: text-before-edge;
            white-space: pre;
        }
    
            :root {
                --animation-duration: 8005ms;
            }

            @keyframes roll {
                0.000%{transform:translateY(0px)}
0.037%{transform:translateY(-102px)}
0.337%{transform:translateY(-204px)}
19.563%{transform:translateY(-306px)}
19.588%{transform:translateY(-408px)}
22.586%{transform:translateY(-510px)}
24.834%{transform:translateY(-612px)}
26.758%{transform:translateY(-714px)}
26.771%{transform:translateY(-816px)}
29.032%{transform:translateY(-918px)}
29.044%{transform:translateY(-1020px)}
30.993%{transform:translateY(-1122px)}
31.006%{transform:translateY(-1224px)}
37.726%{transform:translateY(-1326px)}
87.508%{transform:translateY(-1428px)}
100.000%{transform:translateY(-1428px)}
            }

            #screen_view {
                animation-duration: 8005ms;
                animation-iteration-count:infinite;
                animation-name:roll;
                animation-timing-function: steps(1,end);
                animation-fill-mode: forwards;
            }
        ]]></style>
        <style type="text/css" id="user-style">
            /* The colors defined below are the default 16 colors used for rendering text of the terminal. Adjust
               them as needed.
               PowerShell colors based on https://en.wikipedia.org/wiki/ANSI_escape_code#Colors */
            .foreground {fill: #cccccc;}
            .background {fill: #0c0c0c;}
            .color0 {fill: #0c0c0c;}
            .color1 {fill: #c50f1f;}
            .color2 {fill: #13a10e;}
            .color3 {fill: #c19c00;}
            .color4 {fill: #0037da;}
            .color5 {fill: #881798;}
            .color6 {fill: #3a96dd;}
            .color7 {fill: #cccccc;}
            .color8 {fill: #767676;}
            .color9 {fill: #e74856;}
            .color10 {fill: #16c60c;}
            .color11 {fill: #f9f1a5;}
            .color12 {fill: #3b78ff;}
            .color13 {fill: #b4009e;}
            .color14 {fill: #61d6d6;}
            .color15 {fill: #f2f2f2;}
        </style>
    </defs>
    <svg id="screen" width="960" height="85" viewBox="0 0 960 85" preserveAspectRatio="xMidYMin slice">
    <rect class="background" height="100%" width="100%" x="0" y="0"/><defs><g id="g1"><text x="0" textLength="584" class="foreground">This shows a special password prompt which replaces the entered text with</text></g><g id="g2"><text x="0" textLength="248" class="foreground">a unique visual representation.</text></g><g id="g3"><text x="0" textLength="8" class="background"> </text></g><g id="g4"><text x="0" textLength="296" class="foreground">Enter Password:[                  ==]</text><text x="296" textLength="8" class="background"> </text></g><g id="g5"><text x="0" textLength="288" class="foreground">Enter Password:[             ===    </text><text x="288" textLength="8" class="background">]</text></g><g id="g6"><text x="0" textLength="296" class="foreground">Enter Password:[             ===    ]</text><text x="296" textLength="8" class="background"> </text></g><g id="g7"><text x="0" textLength="296" class="foreground">Enter Password:[  ==================]</text><text x="296" textLength="8" class="background"> </text></g><g id="g8"><text x="0" textLength="296" class="foreground">Enter Password:[            ========]</text><text x="296" textLength="8" class="background"> </text></g><g id="g9"><text x="0" textLength="288" class="foreground">Enter Password:[  ==                </text><text x="288" textLength="8" class="background">]</text></g><g id="g10"><text x="0" textLength="296" class="foreground">Enter Password:[  ==                ]</text><text x="296" textLength="8" class="background"> </text></g><g id="g11"><text x="0" textLength="160" class="foreground">Enter Password:[    </text><text x="160" textLength="8" class="background"> </text><text x="168" textLength="128" class="foreground">               ]</text></g><g id="g12"><text x="0" textLength="296" class="foreground">Enter Password:[        ============]</text><text x="296" textLength="8" class="background"> </text></g><g id="g13"><text x="0" textLength="192" class="foreground">Enter Password:[     ===</text><text x="192" textLength="8" class="background">=</text><text x="200" textLength="96" class="foreground">===========]</text></g><g id="g14"><text x="0" textLength="296" class="foreground">Enter Password:[     ============== ]</text><text x="296" textLength="8" class="background"> </text></g><g id="g15"><text x="0" textLength="296" class="foreground">Enter Password:[                   =]</text><text x="296" textLength="8" class="background"> </text></g></defs><g id="screen_view"><g><use xlink:href="#g1" y="0"/><use xlink:href="#g2" y="17"/><rect x="0" y="51" width="8" height="17" class="foreground"/><use xlink:href="#g3" y="51"/></g><g><use xlink:href="#g1" y="102"/><use xlink:href="#g2" y="119"/><rect x="0" y="153" width="8" height="17" class="foreground"/><use xlink:href="#g3" y="153"/></g><g><use xlink:href="#g1" y="204"/><use xlink:href="#g2" y="221"/><rect x="296" y="255" width="8" height="17" class="foreground"/><use xlink:href="#g4" y="255"/></g><g><use xlink:href="#g1" y="306"/><use xlink:href="#g2" y="323"/><rect x="288" y="357" width="8" height="17" class="foreground"/><use xlink:href="#g5" y="357"/></g><g><use xlink:href="#g1" y="408"/><use xlink:href="#g2" y="425"/><rect x="296" y="459" width="8" height="17" class="foreground"/><use xlink:href="#g6" y="459"/></g><g><use xlink:href="#g1" y="510"/><use xlink:href="#g2" y="527"/><rect x="296" y="561" width="8" height="17" class="foreground"/><use xlink:href="#g7" y="561"/></g><g><use xlink:href="#g1" y="612"/><use xlink:href="#g2" y="629"/><rect x="296" y="663" width="8" height="17" class="foreground"/><use xlink:href="#g8" y="663"/></g><g><use xlink:href="#g1" y="714"/><use xlink:href="#g2" y="731"/><rect x="288" y="765" width="8" height="17" class="foreground"/><use xlink:href="#g9" y="765"/></g><g><use xlink:href="#g1" y="816"/><use xlink:href="#g2" y="833"/><rect x="296" y="867" width="8" height="17" class="foreground"/><use xlink:href="#g10" y="867"/></g><g><use xlink:href="#g1" y="918"/><use xlink:href="#g2" y="935"/><rect x="160" y="969" width="8" height="17" class="foreground"/><use xlink:href="#g11" y="969"/></g><g><use xlink:href="#g1" y="1020"/><use xlink:href="#g2" y="1037"/><rect x="296" y="1071" width="8" height="17" class="foreground"/><use xlink:href="#g12" y="1071"/></g><g><use xlink:href="#g1" y="1122"/><use xlink:href="#g2" y="1139"/><rect x="192" y="1173" width="8" height="17" class="foreground"/><use xlink:href="#g13" y="1173"/></g><g><use xlink:href="#g1" y="1224"/><use xlink:href="#g2" y="1241"/><rect x="296" y="1275" width="8" height="17" class="foreground"/><use xlink:href="#g14" y="1275"/></g><g><use xlink:href="#g1" y="1326"/><use xlink:href="#g2" y="1343"/><rect x="296" y="1377" width="8" height="17" class="foreground"/><use xlink:href="#g15" y="1377"/></g><g><use xlink:href="#g1" y="1428"/><use xlink:href="#g2" y="1445"/><rect x="296" y="1479" width="8" height="17" class="foreground"/><use xlink:href="#g15" y="1479"/></g></g></svg>
</svg>