tkellogg · December 18, 2015 07:19
diff --git a/index.html b/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 crazy 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(71,19) rotate(-2)" pose="-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|-1,59">
        <bubble t="translate(9,11)" pose="0,0|-20,10|-81,49|19,66|-21,145|-73,109">
          <tspan x="0" y="-2em">Man, the servers</tspan>
          <tspan x="0" y="-1em">came down yet</tspan>
          <tspan x="0" y="0em">again today</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="-2em">Dude, again!?</tspan>
          <tspan x="0" y="-1em">What's the</tspan>
          <tspan x="0" y="0em">architecture</tspan>
          <tspan x="0" y="1em">look like?</tspan>
        </bubble>
      </actor>
    </scene>

    <scene id="scene2">
      <label t="translate(100,310)">
        <tspan>Client</tspan>
      </label>
      <drawing t="translate(125,275)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="0" y="25"></point>
        </line>
      </drawing>
      <label t="translate(70,260)">
        <tspan>load balancer</tspan>
      </label>
      <drawing t="translate(65,225)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="30" y="25"></point>
        </line>
      </drawing>
      <drawing t="translate(185,225)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="-30" y="25"></point>
        </line>
      </drawing>
      <label t="translate(50,210)">
        <tspan>Web</tspan>
        <tspan x="-1em" y="1em">Server</tspan>
      </label>
      <label t="translate(180,210)">
        <tspan>Web</tspan>
        <tspan x="-1em" y="1em">Server</tspan>
      </label>
      <drawing t="translate(95,155)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="-30" y="35"></point>
        </line>
      </drawing>
      <drawing t="translate(160,155)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="30" y="35"></point>
        </line>
      </drawing>
      <label t="translate(70,140)">
        <tspan>master service</tspan>
      </label>
      <drawing t="translate(65,95)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="40" y="45"></point>
        </line>
      </drawing>
      <drawing t="translate(125,95)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="0" y="45"></point>
        </line>
      </drawing>
      <drawing t="translate(195,95)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="-40" y="45"></point>
        </line>
      </drawing>
      <label t="translate(30,80)">
        <tspan>slave</tspan>
      </label>
      <label t="translate(110,80)">
        <tspan>slave</tspan>
      </label>
      <label t="translate(190,80)">
        <tspan>slave</tspan>
      </label>
    </scene>

    <scene id="scene3">
      <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|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|-1,59">
        <bubble t="translate(9,11)" pose="0,0|-20,10|-81,49|19,66|-21,145|-73,109">
          <tspan x="0" y="-5em">What's the master service?</tspan>
          <tspan x="0" y="-4em">It looks like a bottleneck</tspan>
          <tspan x="0" y="2em">Well that's your</tspan>
          <tspan x="0" y="3em">problem, The master</tspan>
          <tspan x="0" y="4em">overloads and the</tspan>
          <tspan x="0" y="5em">whole cluster</tspan>
          <tspan x="0" y="6em">craps out</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,122|-65,63">
          <tspan x="0" y="-7.5em">It's like a load</tspan>
          <tspan x="0" y="-6.5em">balancer but</tspan>
          <tspan x="0" y="-5.5em">it does more.</tspan>
          <tspan x="3em" y="1em">yep...</tspan>
        </bubble>
      </actor>
    </scene>

  </div></body>
	<!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 crazy 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(71,19) rotate(-2)" pose="-11,9\|-5,117\|-11,99\|-11,89\|-11,79\|-11,59\|-16,34\|-21,9\|-6,34\|-1,9\|-18,79\|-18,59\|-6,79\|-1,59">
	<bubble t="translate(9,11)" pose="0,0\|-20,10\|-81,49\|19,66\|-21,145\|-73,109">
	<tspan x="0" y="-2em">Man, the servers</tspan>
	<tspan x="0" y="-1em">came down yet</tspan>
	<tspan x="0" y="0em">again today</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="-2em">Dude, again!?</tspan>
	<tspan x="0" y="-1em">What's the</tspan>
	<tspan x="0" y="0em">architecture</tspan>
	<tspan x="0" y="1em">look like?</tspan>
	</bubble>
	</actor>
	</scene>

	<scene id="scene2">
	<label t="translate(100,310)">
	<tspan>Client</tspan>
	</label>
	<drawing t="translate(125,275)">
	<line stroke="black">
	<point x="0" y="0"></point>
	<point x="0" y="25"></point>
	</line>
	</drawing>
	<label t="translate(70,260)">
	<tspan>load balancer</tspan>
	</label>
	<drawing t="translate(65,225)">
	<line stroke="black">
	<point x="0" y="0"></point>
	<point x="30" y="25"></point>
	</line>
	</drawing>
	<drawing t="translate(185,225)">
	<line stroke="black">
	<point x="0" y="0"></point>
	<point x="-30" y="25"></point>
	</line>
	</drawing>
	<label t="translate(50,210)">
	<tspan>Web</tspan>
	<tspan x="-1em" y="1em">Server</tspan>
	</label>
	<label t="translate(180,210)">
	<tspan>Web</tspan>
	<tspan x="-1em" y="1em">Server</tspan>
	</label>
	<drawing t="translate(95,155)">
	<line stroke="black">
	<point x="0" y="0"></point>
	<point x="-30" y="35"></point>
	</line>
	</drawing>
	<drawing t="translate(160,155)">
	<line stroke="black">
	<point x="0" y="0"></point>
	<point x="30" y="35"></point>
	</line>
	</drawing>
	<label t="translate(70,140)">
	<tspan>master service</tspan>
	</label>
	<drawing t="translate(65,95)">
	<line stroke="black">
	<point x="0" y="0"></point>
	<point x="40" y="45"></point>
	</line>
	</drawing>
	<drawing t="translate(125,95)">
	<line stroke="black">
	<point x="0" y="0"></point>
	<point x="0" y="45"></point>
	</line>
	</drawing>
	<drawing t="translate(195,95)">
	<line stroke="black">
	<point x="0" y="0"></point>
	<point x="-40" y="45"></point>
	</line>
	</drawing>
	<label t="translate(30,80)">
	<tspan>slave</tspan>
	</label>
	<label t="translate(110,80)">
	<tspan>slave</tspan>
	</label>
	<label t="translate(190,80)">
	<tspan>slave</tspan>
	</label>
	</scene>

	<scene id="scene3">
	<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\|-5,117\|-11,99\|-11,89\|-11,79\|-11,59\|-16,34\|-21,9\|-6,34\|-1,9\|-18,79\|-18,59\|-6,79\|-1,59">
	<bubble t="translate(9,11)" pose="0,0\|-20,10\|-81,49\|19,66\|-21,145\|-73,109">
	<tspan x="0" y="-5em">What's the master service?</tspan>
	<tspan x="0" y="-4em">It looks like a bottleneck</tspan>
	<tspan x="0" y="2em">Well that's your</tspan>
	<tspan x="0" y="3em">problem, The master</tspan>
	<tspan x="0" y="4em">overloads and the</tspan>
	<tspan x="0" y="5em">whole cluster</tspan>
	<tspan x="0" y="6em">craps out</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,122\|-65,63">
	<tspan x="0" y="-7.5em">It's like a load</tspan>
	<tspan x="0" y="-6.5em">balancer but</tspan>
	<tspan x="0" y="-5.5em">it does more.</tspan>
	<tspan x="3em" y="1em">yep...</tspan>
	</bubble>
	</actor>
	</scene>

	</div></body>