blog/content/examples/git-cv.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 703 656" width="703" version="1.1">
    <defs>
        <termtosvg:template_settings xmlns:termtosvg="https://github.com/nbedos/termtosvg">
            <termtosvg:screen_geometry columns="82" rows="30"/>
        </termtosvg:template_settings>
        <style type="text/css" id="generated-style"><![CDATA[:root {
            --animation-duration: 19280ms;
        }

    #screen {
                font-family: 'DejaVu Sans Mono', monospace;
                font-style: normal;
                font-size: 14px;
            }

        text {
            dominant-baseline: text-before-edge;
            white-space: pre;
        }]]></style>
        <style type="text/css" id="user-style">
            /* gjm8 color theme (source: https://terminal.sexy/) */
            .foreground {fill: #c5c5c5;}
            .background {fill: #1c1c1c;}
            .color0 {fill: #1c1c1c;}
            .color1 {fill: #ff005b;}
            .color2 {fill: #cee318;}
            .color3 {fill: #ffe755;}
            .color4 {fill: #048ac7;}
            .color5 {fill: #833c9f;}
            .color6 {fill: #0ac1cd;}
            .color7 {fill: #e5e5e5;}
            .color8 {fill: #1c1c1c;}
            .color9 {fill: #ff005b;}
            .color10 {fill: #cee318;}
            .color11 {fill: #ffe755;}
            .color12 {fill: #048ac7;}
            .color13 {fill: #833c9f;}
            .color14 {fill: #0ac1cd;}
            .color15 {fill: #e5e5e5;}
            #wide_track {
                transform: translate(150px, calc(100% - 45px));
            }
            #track {
                transform: translate(150px, calc(100% - 33px));
            }
            #slider_button {
                transform: translate(0px, calc(100% - 30px));
            }
            #timer {
                transform: translate(60px, calc(100% - 38px));
                font-family: 'DejaVu Sans Mono', monospace;
                font-style: normal;
                font-size: 14px;
            }
            #play-button {
                transform: translate(30px, calc(100% - 45px));
            }
            #pause-button {
                transform: translate(30px, calc(100% - 45px));
            }
        </style>
        <rect id="slider_wide_track" height="30px" width="65%"/>
        <rect id="slider_track" height="6px" width="65%"/>
        <circle id="slider_button" r="10px" class="color1"/>
        <g id="icon-play">
            <rect x="-5" y="0" width="25" height="30" class="background"/>
            <path d="M0 4l14 11-14 11z"/>
        </g>
        <g id="icon-pause">
            <rect x="-5" y="0" width="25" height="30" class="background"/>
            <rect x="0" y="5" width="5" height="20"/>
            <rect x="10" y="5" width="5" height="20"/>
        </g>
    </defs>
    <rect id="terminalui" class="background" width="100%" height="100%" ry="4.5826941"/>
    <circle cx="24" cy="23" r="7" class="color1"/>
    <circle cx="44" cy="23" r="7" class="color3"/>
    <circle cx="64" cy="23" r="7" class="color2"/>
    <svg id="screen" width="656" x="23" y="50" viewBox="0 0 656 510" preserveAspectRatio="xMidYMin meet">
        <rect class="background" height="100%" width="100%" x="0" y="0"/><g display="none"><rect class="foreground" height="17" width="8" x="16" y="17"/><use y="17" xlink:href="#g1"/><animate attributeName="display" begin="0ms; anim_last.end" dur="258ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="24" y="17"/><use y="17" xlink:href="#g2"/><animate attributeName="display" begin="258ms; anim_last.end+258ms" dur="80ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="32" y="17"/><use y="17" xlink:href="#g3"/><animate attributeName="display" begin="338ms; anim_last.end+338ms" dur="71ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="40" y="17"/><use y="17" xlink:href="#g4"/><animate attributeName="display" begin="409ms; anim_last.end+409ms" dur="104ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="48" y="17"/><use y="17" xlink:href="#g5"/><animate attributeName="display" begin="513ms; anim_last.end+513ms" dur="80ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="56" y="17"/><use y="17" xlink:href="#g6"/><animate attributeName="display" begin="593ms; anim_last.end+593ms" dur="103ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="64" y="17"/><use y="17" xlink:href="#g7"/><animate attributeName="display" begin="696ms; anim_last.end+696ms" dur="32ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="72" y="17"/><use y="17" xlink:href="#g8"/><animate attributeName="display" begin="728ms; anim_last.end+728ms" dur="95ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="80" y="17"/><use y="17" xlink:href="#g9"/><animate attributeName="display" begin="823ms; anim_last.end+823ms" dur="288ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="88" y="17"/><use y="17" xlink:href="#g10"/><animate attributeName="display" begin="1111ms; anim_last.end+1111ms" dur="80ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="96" y="17"/><use y="17" xlink:href="#g11"/><animate attributeName="display" begin="1191ms; anim_last.end+1191ms" dur="103ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="104" y="17"/><use y="17" xlink:href="#g12"/><animate attributeName="display" begin="1294ms; anim_last.end+1294ms" dur="160ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="112" y="17"/><use y="17" xlink:href="#g13"/><animate attributeName="display" begin="1454ms; anim_last.end+1454ms" dur="272ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="120" y="17"/><use y="17" xlink:href="#g14"/><animate attributeName="display" begin="1726ms; anim_last.end+1726ms" dur="609ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="0" y="34"/><use y="34" xlink:href="#g15"/><animate attributeName="display" begin="2335ms; anim_last.end+2335ms" dur="5ms" from="inline" to="inline"/></g><g display="none"><use y="0" xlink:href="#g16"/><animate attributeName="display" begin="0ms; anim_last.end" dur="2401ms" from="inline" to="inline"/></g><g display="none"><use y="17" xlink:href="#g17"/><animate attributeName="display" begin="2335ms; anim_last.end+2335ms" dur="66ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="632" y="34"/><use y="34" xlink:href="#g18"/><animate attributeName="display" begin="2340ms; anim_last.end+2340ms" dur="61ms" from="inline" to="inline"/></g><g display="none"><rect class="foreground" height="17" width="8" x="0" y="0"/><use y="0" xlink:href="#g19"/><use y="17" xlink:href="#g20"/><use y="34" xlink:href="#g2
    <text id="timer" class="foreground">0:00/0:00</text>
    <!-- Invisible, wider track to make frame seeking easier -->
    <use xlink:href="#slider_wide_track" id="wide_track" class="background"/>
    <!-- Visible track -->
    <use xlink:href="#slider_track" id="track" class="foreground"/>
    <use xlink:href="#slider_button" id="slider_1" x="0px">
        <animate attributeName="x" begin="0ms;anim_slider_button.end" dur="0ms" from="0" to="0" id="anim_slider_button"/>
    </use>
    <use xlink:href="#icon-play" id="play-button" class="foreground"/>
    <use xlink:href="#icon-pause" id="pause-button" class="foreground"/>
    <script type="text/javascript">
var terminal   = document.getElementById('terminal');
var screen = terminal.getElementById('screen');
var slider_1  = terminal.getElementById('slider_1');
var anim_slider_button = document.getElementById('anim_slider_button');
var style = getComputedStyle(terminal);
var animation_duration = parseInt(style.getPropertyValue('--animation-duration')) / 1000;

function getTranslateX(elem) {
  var style = window.getComputedStyle(elem);
  var matrix = new WebKitCSSMatrix(style.webkitTransform);
  return parseInt(matrix.m41)
}

track_begin = getTranslateX(terminal.getElementById('track'))
anim_slider_button.setAttribute('from', track_begin);

var track_width = terminal.getElementById('track').getBoundingClientRect().width;
anim_slider_button.setAttribute('to', track_begin + track_width);

var play_button = terminal.getElementById('play-button');
var pause_button = terminal.getElementById('pause-button');

// Set slider button animation duration
anim_slider_button.setAttribute('dur', style.getPropertyValue('--animation-duration'));

play_button.setAttribute('display', 'none');
pause_button.setAttribute('display', 'inline');

function togglePlayPause() {
    if (terminal.animationsPaused() || screen.animationsPaused()) {
        terminal.unpauseAnimations()
        screen.unpauseAnimations()
        play_button.setAttribute('display', 'none')
        pause_button.setAttribute('display', 'inline')
    } else {
        terminal.pauseAnimations()
        screen.pauseAnimations()
        play_button.setAttribute('display', 'inline')
        pause_button.setAttribute('display', 'none')
    }
};

play_button.addEventListener('click', togglePlayPause, false)
pause_button.addEventListener('click', togglePlayPause, false)

var limitLower = parseInt(anim_slider_button.getAttribute('from'));
/* Subtract a few pixels so that bringing the button to the end of the track does make it jump to
the beginning */
var limitUpper = parseInt(anim_slider_button.getAttribute('to')) - 8;

var timer = terminal.getElementById('timer')

function timer_from_ms(t) {
    minutes = Math.floor(t / 60);
    seconds = Math.floor(t % 60);
    return minutes + ':' + ("0" + seconds).slice(-2)
}

function update_timer(){
    var current_time = terminal.getCurrentTime() % animation_duration
    timer.textContent =  timer_from_ms(current_time) + "/" + timer_from_ms(animation_duration)
}

setInterval(update_timer, "100ms")

// Return X position for an event
function mx(evt){
    var pt = terminal.createSVGPoint();
    pt.x = evt.clientX;
    return pt.matrixTransform(terminal.getScreenCTM().inverse());
}

// Set the current time of the animation to get the slider button under the cursor
var move = function(evt){
    var cursor_position = mx(evt);
    if ( cursor_position.x &lt; limitLower || cursor_position.x &gt; limitUpper ) {
        return;
    }
    new_time = animation_duration * (cursor_position.x - limitLower) / (limitUpper - limitLower)
    terminal.setCurrentTime(new_time)
    screen.setCurrentTime(new_time)
};

// Move the slider button to the cursor position when a click happens on the track of the slider
terminal.getElementById('wide_track').addEventListener('click', move, false);
terminal.getElementById('track').addEventListener('click', move, false);

// Enable slider button dragging along the track
var dragging = false;
slider_1.addEventListener('mousedown',function(evt){
        is_playing = !(terminal.animationsPaused() &amp;&amp; screen.animationsPaused())
        if (is_playing) {
            terminal.pauseAnimations()
            screen.pauseAnimations()
        }

        dragging = true;
        terminal.addEventListener('mousemove', move, false);
        document.documentElement.addEventListener('mouseup', function(){
                dragging = false;
                if (is_playing) {
                    terminal.unpauseAnimations()
                    screen.unpauseAnimations()
                }
                terminal.removeEventListener('mousemove', move, false);
        }, false);
}, false);
</script>
</svg>