Skip to content

Instantly share code, notes, and snippets.

@chiradeep

chiradeep/index.html

Created April 5, 2018 23:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chiradeep/a9bd8f3b7638888ff81622505a323e40 to your computer and use it in GitHub Desktop.
Save chiradeep/a9bd8f3b7638888ff81622505a323e40 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cmx.io/v/0.1/cmx.css">
<script src="http://cmx.io/v/0.1/cmx.js" charset="utf-8"></script>
<style>.cmx-user-scene4 .cmx-text-border .cmx-path {stroke: orange}</style>
<body>
<div style="max-width:900px; -webkit-transform:rotate(0deg)">
<scene id="scene1">
<label t="translate(0,346)">
<tspan x="0" y="0em">One lazy morning</tspan>
</label>
<drawing t="translate(0,31)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</drawing>
<actor t="translate(78,20) rotate(-1)" pose="-11,9|-8,118|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|14,26|-18,79|-32,79|-6,79|14,72">
<bubble t="translate(9,11)" pose="0,0|-20,10|-81,49|19,66|-21,145|-73,109">
<tspan x="0" y="-3em">Networks are too</tspan>
<tspan x="0" y="-2em">hard to change</tspan>
<tspan x="0" y="0em">Manual</tspan>
<tspan x="0" y="1em">changes take </tspan>
<tspan x="0" y="2em">too long and</tspan>
<tspan x="0" y="3em">make many mistakes...</tspan>
<tspan x="8" y="76px">Excruciating!</tspan>
</bubble>
</actor>
<actor t="translate(159,15)" pose="28,1|30,109|28,91|28,81|28,71|28,51|18,31|18,1|33,26|38,1|23,71|18,51|38,71|38,51">
<bubble t="translate(-2,-9)" pose="0,0|-14,24|-36,69|27,28|8,72|-35,93">
<tspan x="0" y="0em">That sounds</tspan>
<tspan x="0" y="1em">painful!</tspan>
<tspan x="0" y="2em">and slow!</tspan>
</bubble>
</actor>
</scene>
<scene id="scene2">
<drawing t="translate(0,31)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</drawing>
<actor t="translate(71,19) rotate(-2)" pose="-11,9|-1,114|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|13,83">
<bubble t="translate(-3,0)" pose="0,0|-12,22|-83,104|45,21|-37,182|-58,162">
<tspan x="0" y="-2em">One word!
<tspan x="0" y="0em">Automation!</tspan>
<tspan x="0" y="2em">We'll use DevOps tools like</tspan>
<tspan x="0" y="3em">Ansible to roll out</tspan>
<tspan x="0" y="4em">changes in <tspan fill="blue">hours</tspan></tspan>
<tspan x="0" y="5em"> instead of <tspan fill="red">days</tspan></tspan>
</tspan></bubble>
</actor>
<actor t="translate(159,15)" pose="28,1|30,109|28,91|28,81|28,71|28,51|18,31|13,1|33,26|38,1|23,71|18,51|38,71|38,51">
<bubble t="translate(-2,-9)" pose="0,0|7,33|14,66|-63,30|-52,62|-94,113">
<tspan x="0" y="2em">wow</tspan>
<tspan x="0" y="3em">sounds like an easy</tspan>
<tspan x="0" y="4em" fill="green">win</tspan>
</bubble>
</actor>
</scene>
<scene id="scene3">
<label t="translate(0,346)">
<tspan x="0" y="0em">A few months later</tspan>
</label>
<drawing t="translate(0,31)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</drawing>
<actor t="translate(40,20) rotate(2)" pose="-41,48|15,114|0,88|0,78|-5,68|-5,48|-10,23|-15,-2|0,23|5,-2|-11,70|-14,54|20,70|24,96">
<bubble t="translate(-2,-9)" pose="0,0|1,19|-15,47|24,115|11,198|-13,178">
<tspan x="0" y="-1em">hey! I've finally</tspan>
<tspan x="0" y="0em"> done it!</tspan>
<tspan x="0" y="2em"> But it was</tspan>
<tspan x="0" y="3em"> a <tspan fill="red">disaster</tspan></tspan>
<tspan x="0" y="5em">We make the same</tspan>
<tspan x="0" y="6em" fill="red">mistakes faster</tspan>
<tspan x="0" y="7em" fill="red">and at scale!</tspan>
</bubble>
</actor>
<actor t="translate(159,15)" pose="28,1|30,109|28,91|28,81|28,71|28,51|18,31|13,1|33,26|38,1|23,71|18,51|38,71|38,51">
<bubble t="translate(-2,-9)" pose="0,0|7,33|57,27|2,119|13,151|-25,204">
<tspan x="0" y="2em">?!?!</tspan>
<tspan x="0" y="3em">What</tspan>
<tspan x="0" y="4em">happened?</tspan>
</bubble>
</actor>
</scene>
</div></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment