walkthrough.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 300">

  <defs>
    <style>

      .pre-white-space {
        white-space: pre;
      }

      /*
       * Base colorscheme: wimstefan/Lightning.vim
       */
      
      .co-normal {
        fill: #1c1c1c;
      }

      .co-special {
        fill: #00af5f;
      }

      .co-string {
        fill: #005f87;
      }

      .co-comment {
        fill: #808080;
      }

      .co-type1 {
        fill: #6579ff;
      }

      .co-emphasize1 {
        fill: #D62900;
      }

      .co-emphasize2 {
        fill: #D69900; 
      }

      .co-emphasize1-stroke {
        stroke: #D62900;
      }

      .co-emphasize2-stroke {
        stroke: #D69900; 
      }

      .co-emphasize3-stroke {
        stroke: #00af5f;
      }

      .co-emphasize4-stroke {
        stroke: #005f87;
      }

      .code {
        font: 400 normal 1.6em/1.6
          "Operator Mono",
          "Fira Code",
          "Thesis Sans Mono",
          "Source Code Pro",
          "Menlo",
          "Monaco",
          "Lucida Console",
          "Courier",
          monospace;
      }

      /*
        Animation timeline:
        0.0s - 1.6s: packagejson enters
        1.6s - 2.0s: pause
        2.0s - 2.3s: colored start
        2.0s - 2.5s: line for start
        2.3s - 2.5s: start description
        2.5s - 2.8s: colored foo
        2.5s - 3.0s: line for foo
        2.8s - 3.0s: foo description
        3.0s - 4.0s: pause
        4.0s - 5.0s: packagejson exits
        5.0s - 6.6s: tasksjs enters
        6.6s - 7.0s: pause
        7.0s - 7.4s: grayout parts of tasksjs
        7.4s - 15.0s: radiate parameter line
        7.8s - 9.0s: color the parameter text
        8.5s - 9.0s: draw env line
        9.0s - 9.3s: fadein env desc
        9.5s - 10.0s: draw scriptname line
       10.0s - 10.3s: fadein scriptname desc
       10.3s - 14.0s: pause
       14.0s - 15.0s: tasksjs exits
       15.0s - 16.6s: saysomething enters
       16.6s - 17.6s: pause
       17.6s - 19.2s: saysomething exits
       19.2s - 20.8s: typing npm start
       20.8s - 24.0s: cursor blinking
       22.4s - 24.0s: npmstart exits
      */

      /*
       *
       * PACKAGE_JSON
       *
       */

      .packagejson {
        transform: translate(80%);
        opacity: 0;
        font-size: 1.5em;
        animation: packagejson 24s infinite;
      }

      .packagejson__line {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
      }

      .packagejson__line1 {
        animation: packagejson-line1 24s linear infinite;
      }

      .packagejson__line2 {
        animation: packagejson-line2 24s linear infinite;
      }

      .packagejson__colored-start {
        animation: packagejson-colored-start 24s infinite;
      }

      .packagejson__colored-foo {
        animation: packagejson-colored-foo 24s infinite;
      }

      .packagejson__desc {
        font-size: .45em;
      }

      .packagejson__desc1 {
        opacity: 0;
        animation: packagejson-desc1 24s infinite;
      }

      .packagejson__desc2 {
        opacity: 0;
        animation: packagejson-desc2 24s infinite;
      }

      @keyframes packagejson {
        6.666666666666667%,
        16.666666666666668% {
          transform: translate(0);
          opacity: 1;
        }
        20.833333333333336%, to {
          transform: translate(-80%);
          opacity: 0;
        }
      }

      @keyframes packagejson-colored-start {
        8.333333333333334% {
          fill: #005f87; /* co-string */
        }
        9.583333333333334%, to {
          fill: #D62900; /* co-emphasize1 */
        }
      }

      @keyframes packagejson-line1 {
        8.333333333333334% {
          stroke-dashoffset: 100;
        }
        10.416666666666668%, to {
          stroke-dashoffset: 200;
        }
      }

      @keyframes packagejson-desc1 {
        9.583333333333334% { opacity: 0; }
        10.416666666666668%, to { opacity: 1; }
      }

      @keyframes packagejson-colored-foo {
        10.416666666666668% {
          fill: #005f87; /* co-string */
        }
        11.666666666666668%, to {
          fill: #D69900; /* co-emhpasize2 */ 
        }
      }

      @keyframes packagejson-line2 {
        10.416666666666668% {
          stroke-dashoffset: 100;
        }
        12.5%, to {
          stroke-dashoffset: 200;
        }
      }

      @keyframes packagejson-desc2 {
        11.666666666666668% { opacity: 0; }
        12.5%, to { opacity: 1; }
      }

      /*
       *
       * TASKS_JS
       *
       */

      .tasksjs {
        font-size: 1.2em;
        transform: translate(80%);
        opacity: 0;
        animation: tasksjs 24s infinite;
      }

      .tasksjs__grayout tspan {
        animation-duration: 24s;
        animation-iteration-count: infinite;
      }

      .tasksjs__grayout tspan.co-normal {
        animation-name: tasksjs-normal-grayout;
      }

      .tasksjs__grayout tspan.co-string {
        animation-name: tasksjs-string-grayout;
      }

      .tasksjs__grayout tspan.co-type1 {
        animation-name: tasksjs-type1-grayout;
      }

      .tasksjs__grayout tspan.co-comment {
        animation-name: tasksjs-comment-grayout;
      }

      .tasksjs__paramline {
        opacity: 0;
        stroke-dasharray: 10;
        stroke-dashoffset: 150;
        animation:
          tasksjs-paramline
          24s
          linear
          infinite;
      }

      .tasksjs__coloredparam {
        animation: tasksjs-color-param 24s infinite;
      }

      .tasksjs__envline {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation:
          tasksjs-envline
          24s
          infinite;
      }

      .tasksjs__envdesc {
        opacity: 0;
        font-size: .6em;
        animation:
          tasksjs-envdesc
          24s
          infinite;
      }

      .tasksjs__scriptline {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        animation:
          tasksjs-scriptline
          24s
          infinite;
      }

      .tasksjs__scriptdesc {
        opacity: 0;
        font-size: .6em;
        animation:
          tasksjs-scriptdesc
          24s
          infinite;
      }

      @keyframes tasksjs {
        20.833333333333336% {
          transform: translate(80%);
          opacity: 0;
        }
        27.499999999999996%,
        58.333333333333336% {
          transform: translate(18%);
          opacity: 1;
        }
        62.5%, to {
          transform: translate(-80%);
          opacity: 0;
        }
      }

      @keyframes tasksjs-normal-grayout {
        29.166666666666668%     { fill: #1c1c1c; }
        30.833333333333336%, to { fill: #ccc; }
      }

      @keyframes tasksjs-string-grayout {
        29.166666666666668%     { fill: #005f87; }
        30.833333333333336%, to { fill: #ccc; }
      }

      @keyframes tasksjs-type1-grayout {
        29.166666666666668%     { fill: #6579ff; }
        30.833333333333336%, to { fill: #ccc; }
      }

      @keyframes tasksjs-comment-grayout {
        29.166666666666668%     { fill: #808080; }
        30.833333333333336%, to { fill: #ccc; }
      }

      @keyframes tasksjs-paramline {
        30.833333333333336% {
          opacity: 0;
          stroke-dashoffset: 150;
        }
        31.8% {
          opacity: .7;
        }
        62.5%, to {
          opacity: .7;
          stroke-dashoffset: 0;
        }
      }

      @keyframes tasksjs-color-param {
        32.5% {
          fill: #1c1c1c; /* co-normal */
        }
        37.5%, to {
          fill: #D69900; /* co-emphasize2 */
        }
      }

      @keyframes tasksjs-envline {
        35.416666666666664% {
          stroke-dashoffset: 100;
        }
        37.5%, to {
          stroke-dashoffset: 200;
        }
      }

      @keyframes tasksjs-envdesc {
        37.5% { opacity: 0; }
        38.75%, to { opacity: 1; }
      }

      @keyframes tasksjs-scriptline {
        39.583333333333336% {
          stroke-dashoffset: 200;
        }
        41.66666666666667%, to {
          stroke-dashoffset: 400;
        }
      }

      @keyframes tasksjs-scriptdesc {
        41.66666666666667% {
          opacity: 0;
        }
        42.91666666666667%, to {
          opacity: 1;
        }
      }

      /*
       *
       * SAY_SOMETHING.SH
       *
       */

      .saysomething {
        animation: saysomething 24s infinite;
      }
      
      .saysomething__line {
        text-anchor: middle;
      }

      @keyframes saysomething {
        from, 62.5% {
          transform: translate(80%);
          opacity: 0;
        }
        69.16666666666667%,
        73.33333333333334% {
          transform: translate(0);
          opacity: 1;
        }
        80%, to {
          transform: translate(-80%);
          opacity: 0;
        }
      }

      /*
       *
       *
       * NPM_START
       *
       *
       */

      .npmstart {
        transform: translate(142px);
        animation: npmstart 24s infinite;
      }

      .npmstart__letter1,
      .npmstart__letter2,
      .npmstart__letter3,
      .npmstart__letter4,
      .npmstart__letter5,
      .npmstart__letter6,
      .npmstart__letter7,
      .npmstart__letter8,
      .npmstart__letter9 {
        opacity: 0;
        animation-duration: 24s;
        animation-iteration-count: infinite;
      }

      .npmstart__letter1 { animation-name: npmstart-letter1 }
      .npmstart__letter2 { animation-name: npmstart-letter2 }
      .npmstart__letter3 { animation-name: npmstart-letter3 }
      .npmstart__letter4 { animation-name: npmstart-letter4 }
      .npmstart__letter5 { animation-name: npmstart-letter5 }
      .npmstart__letter6 { animation-name: npmstart-letter6 }
      .npmstart__letter7 { animation-name: npmstart-letter7 }
      .npmstart__letter8 { animation-name: npmstart-letter8 }
      .npmstart__letter9 { animation-name: npmstart-letter9 }

      .npmstart__cursor {
        animation: 
          npmstart-cursor 24s infinite,
          npmstart-cursor-blink 24s infinite;
      }

      @keyframes npmstart {
        from, 79%, to { opacity: 0; }
        80%, 93.33333333333334% { opacity: 1; }
      }

      @keyframes npmstart-letter1 {
        from, 79.99% {
          opacity: 0;
        }
        80%, to {
          opacity: 1;
        }
      }

      @keyframes npmstart-letter2 {
        from, 81.36% {
          opacity: 0;
        }
        81.66666666666669%, to {
          opacity: 1;
        }
      }

      @keyframes npmstart-letter3 {
        from, 81.7% {
          opacity: 0;
        }
        82.08333333333333%, to {
          opacity: 1;
        }
      }

      @keyframes npmstart-letter4 {
        from, 82.2% {
          opacity: 0;
        }
        82.5%, to {
          opacity: 1;
        }
      }

      @keyframes npmstart-letter5 {
        from, 83% {
          opacity: 0;
        }
        83.33333333333334%, to {
          opacity: 1;
        }
      }

      @keyframes npmstart-letter6 {
        from, 83.86% {
          opacity: 0;
        }
        84.16666666666667%, to {
          opacity: 1;
        }
      }

      @keyframes npmstart-letter7 {
        from, 84.7% {
          opacity: 0;
        }
        85%, to {
          opacity: 1;
        }
      }

      @keyframes npmstart-letter8 {
        from, 85.53% {
          opacity: 0;
        }
        85.83333333333334%, to {
          opacity: 1;
        }
      }

      @keyframes npmstart-letter9 {
        from, 86.36% {
          opacity: 0;
        }
        86.66666666666667%, to {
          opacity: 1;
        }
      }

      @keyframes npmstart-cursor {
        from, 79.99% {
          transform: translate(0);
        }
        80%, 81.65% {
          transform: translate(130%);
        }
        81.66666666666669%, 82.07% {
          transform: translate(260%);
        }
        82.08333333333333%, 82.49% {
          transform: translate(390%);
        }
        82.5%, 83.32% {
          transform: translate(520%);
        }
        83.33333333333334%, 84.15% {
          transform: translate(650%);
        }
        84.16666666666667%, 84.99% {
          transform: translate(780%);
        }
        85%, 85.82% {
          transform: translate(910%);
        }
        85.83333333333334%, 86.65% {
          transform: translate(1040%);
        }
        86.66666666666667%, to {
          transform: translate(1170%);
        }
      }

      @keyframes npmstart-cursor-blink {
        from, 86.66666666666667% { opacity: 1 }
        86.67%, 88.33333333333333% { opacity: 0 }
        88.34%, 90.00000000000001% { opacity: 1 }
        90.01%, 91.66666666666667% { opacity: 0 }
        91.67%, 93.33333333333334%, to { opacity: 1; }
        93.34%, 95% { opacity: 0; }
        95.01%, 96.66666666666666% { opacity: 1; }
        96.67%, 98.33333333333334% { opacity: 0; }
        98.34%, to { opacity: 1; }
      }

      /*
       *
       *
       * Descriptor
       *
       *
       */

      .descriptor {
        transform: translate(0, 280px);
        font-size: .8em;
      }

      .descriptor__text1,
      .descriptor__text2,
      .descriptor__text3,
      .descriptor__text4 {
        text-anchor: middle;
        opacity: 0;
        animation-duration: 24s;
        animation-iteration-count: infinite;
      }

      .descriptor__text1 { animation-name: descriptor-text1; }
      .descriptor__text2 { animation-name: descriptor-text2; }
      .descriptor__text3 { animation-name: descriptor-text3; }
      .descriptor__text4 { animation-name: descriptor-text4; }

      .descriptor__line1,
      .descriptor__line2 {
        stroke-dasharray: 110;
        animation-duration: 24s;
        animation-iteration-count: infinite;
      }

      .descriptor__line1 {
        transform: translate(140px);
        stroke-dashoffset: 220;
        animation-name: descriptor-line1;
      }

      .descriptor__line2 {
        transform: translate(140px);
        stroke-dashoffset: 0;
        animation-name: descriptor-line2;
      }

      @keyframes descriptor-text1 {
        6.666666666666667%,
        16.666666666666668% { opacity: 1; }
        20.833333333333336%, to { opacity: 0; }
      }

      @keyframes descriptor-text2 {
        20.833333333333336% { opacity: 0; }
        27.499999999999996%,
        58.333333333333336% { opacity: 1; }
        62.5%, to { opacity: 0; }
      }

      @keyframes descriptor-text3 {
        from, 62.5% { opacity: 0; }
        69.16666666666667%,
        73.33333333333334% { opacity: 1; }
        80%, to { opacity: 0; }
      }

      @keyframes descriptor-text4 {
        from, 80%, to { opacity: 0; }
        82%, 93.33333333333334% { opacity: 1; }
      }

      @keyframes descriptor-line1 {
        from, 6.666666666666667%, 16.666666666666668%, to {
          stroke-dashoffset: 151;
        }
        20.833333333333336%, 58.333333333333336% {
          stroke-dashoffset: 165;
        }
        62.5%, 73.33333333333334% {
          stroke-dashoffset: 214;
        }
        80%, 93.33333333333334% {
          stroke-dashoffset: 151;
        }
      }

      @keyframes descriptor-line2 {
        from, 6.666666666666667%, 16.666666666666668%, to {
          stroke-dashoffset: 68;
        }
        20.833333333333336%, 58.333333333333336% {
          stroke-dashoffset: 54;
        }
        62.5%, 73.33333333333334% {
          stroke-dashoffset: 5;
        }
        80%, 93.33333333333334% {
          stroke-dashoffset: 68;
        }
      }

    </style>
  </defs>
  
  <g class="code packagejson">

    <text
      x="270"
      y="95"
      class="packagejson__desc packagejson__desc1 co-emphasize1">
      TASK NAME
    </text>

    <path
      d="M 300 100 C 310 160, 350 100, 340 135" 
      stroke-width="2" 
      class="co-emphasize1-stroke packagejson__line packagejson__line1" 
      fill="transparent" />

    <text
      x="385"
      y="90"
      class="packagejson__desc packagejson__desc2 co-emphasize2">
      A PARAMETER
    </text>

    <path
      d="M 415 95 C 400 110, 410 130, 425 135"
      stroke-width="2"
      class="co-emphasize2-stroke packagejson__line packagejson__line2"
      fill="transparent" />

    <text x="35" y="120" class="code__line">
      <tspan class="co-normal">"</tspan><!--
      --><tspan class="co-type1">scripts</tspan><!--
      --><tspan class="co-normal">"</tspan><!--
      --><tspan class="co-normal">: </tspan><!--
      --><tspan class="co-special">{</tspan>
    </text>

    <text x="35" y="155" class="code__line">
      <tspan class="pre-white-space co-normal">  "</tspan><!--
      --><tspan class="co-type1">start</tspan><!--
      --><tspan class="co-normal">"</tspan><!--
      --><tspan class="co-normal">: </tspan><!--
      --><tspan class="co-normal">"</tspan><!--
      --><tspan class="co-string">salinger </tspan><!--
      --><tspan class="packagejson__colored-start">start </tspan><!--
      --><tspan class="packagejson__colored-foo">foo</tspan><!--
      --><tspan class="co-normal">"</tspan>
    </text>

    <text x="35" y="190" class="code__line">
      <tspan class="co-special">}</tspan>
    </text>

  </g>

  <g class="code tasksjs">

    <text x="35" y="45" class="code__line">
      <tspan class="co-emphasize1">start</tspan><!--
      --><tspan class="co-normal">(</tspan><!--
      --><tspan class="co-emphasize2">parameterFromCLI</tspan><!--
      --><tspan class="co-normal">) </tspan><!--
      --><tspan class="co-type1">{</tspan>
    </text>

    <text x="35" y="70" class="code__line tasksjs__grayout">
      <tspan class="pre-white-space co-normal">  run(</tspan><!--
      --><tspan class="co-string">'clean'</tspan><!--
      --><tspan class="co-normal">)</tspan><!--
      --><tspan class="co-normal">.then(_ => </tspan><!--
      --><tspan class="co-type1">{</tspan>
    </text>

    <text x="35" y="95" class="code__line tasksjs__grayout">
      <tspan class="pre-white-space co-normal">    run(</tspan><!--
      --><tspan class="co-string">'copy_static'</tspan><!--
      --><tspan class="co-normal">)</tspan>
    </text>

    <text x="35" y="120" class="code__line">
      <tspan class="pre-white-space co-normal">    run(</tspan><!--
      --><tspan class="co-string">'say_something'</tspan><!--
      --><tspan class="co-normal">, </tspan><!--
      --><tspan class="co-type1">{</tspan>
    </text>
    
    <text x="35" y="145" class="code__line">
      <tspan class="pre-white-space co-normal">      MESSAGE: </tspan>
      <tspan class="tasksjs__coloredparam">parameterFromCLI</tspan>
    </text>

    <text x="35" y="170" class="code__line">
      <tspan class="pre-white-space co-type1">    }</tspan><!--
      --><tspan class="co-normal">)</tspan>
    </text>

    <text x="35" y="195" class="code__line tasksjs__grayout">
      <tspan class="pre-white-space co-normal">    run(</tspan><!--
      --><tspan class="co-string">'watch_static'</tspan><!--
      --><tspan class="co-normal">)</tspan>
    </text>

    <text x="35" y="220" class="code__line tasksjs__grayout">
      <tspan class="pre-white-space co-comment">    // ...</tspan>
    </text>

    <text x="35" y="245" class="code__line">
      <tspan class="pre-white-space co-type1">  }</tspan><!--
      --><tspan class="co-normal">)</tspan>
    </text>

    <text x="35" y="270" class="code__line">
      <tspan class="pre-white-space co-type1">}</tspan><!--
      --><tspan class="co-normal">,</tspan>
    </text>

    <path
      d="M 225 50 L 235 130"
      stroke-width="20"
      class="co-emphasize2-stroke tasksjs__paramline"
      fill="transparent" />

    <path
      d="M 40 170 C 60 130 75 155 95 138"
      stroke-width="2"
      class="co-emphasize3-stroke tasksjs__envline"
      fill="transparent" />

    <text x="75" y="140" transform="rotate(30)" class="co-special tasksjs__envdesc">
      ENV. VARIABLE
    </text>

    <path
      d="M 20 100 C 60 100 150 55 140 105"
      stroke-width="2"
      class="co-emphasize4-stroke tasksjs__scriptline"
      fill="transparent" />

    <text x="25" y="90" transform="rotate(30)" class="co-string tasksjs__scriptdesc">
      SCRIPT NAME
    </text>

  </g>
  
  <g class="code saysomething">

    <!-- To expand the group -->
    <rect x="35" y="50" width="430" height="20" fill="transparent" />

    <text x="50%" y="158" class="saysomething__line">
      <tspan class="co-normal">echo </tspan><!--
      --><tspan class="co-special">$MESSAGE</tspan>
    </text>

  </g>

  <g class="code npmstart">

    <!-- To expand the group -->
    <rect x="35" y="50" width="430" height="20" fill="transparent" />

    <text x="35" y="158">
      <tspan class="npmstart__letter1">n</tspan><!--
      --><tspan class="npmstart__letter2">p</tspan><!--
      --><tspan class="npmstart__letter3">m</tspan><!--
      --><tspan class="pre-white-space npmstart__letter4"> </tspan><!--
      --><tspan class="npmstart__letter5">s</tspan><!--
      --><tspan class="npmstart__letter6">t</tspan><!--
      --><tspan class="npmstart__letter7">a</tspan><!--
      --><tspan class="npmstart__letter8">r</tspan><!--
      --><tspan class="npmstart__letter9">t</tspan>
    </text>

    <rect
      class="npmstart__cursor"
      x="37"
      y="140"
      width="11"
      height="20" />

  </g>

  <g class="code descriptor">

    <text x="50%" y="0">
      <tspan class="co-normal descriptor__text1">
        package.json
      </tspan>
    </text>

    <text x="50%" y="0">
      <tspan class="co-normal descriptor__text2">
        scripts/tasks.js
      </tspan>
    </text>

    <text x="50%" y="0">
      <tspan class="co-normal descriptor__text3">
        scripts/tasks/say_something.sh
      </tspan>
    </text>

    <text x="50%" y="0">
      <tspan class="co-normal descriptor__text4">
        command-line
      </tspan>
    </text>

    <path
      class="descriptor__line1"
      stroke="#262626"
      stroke-width="1"
      d="M 0 10 L 110 10" />

    <path
      class="descriptor__line2"
      stroke="#262626"
      stroke-width="1"
      d="M 110 10 L 220 10" />
  </g>

</svg>