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>