Skip to content

Instantly share code, notes, and snippets.

@shenzhuxi

shenzhuxi/index.html

Last active December 17, 2015 12:19
Show Gist options
  • Save shenzhuxi/5608900 to your computer and use it in GitHub Desktop.
Save shenzhuxi/5608900 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">In the hospital</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|-48,34|17,52|-29,109|-73,109">
<tspan x="0" y="-2em">There is a good news</tspan>
<tspan x="0" y="-1em"> and a bad news for you.</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">
</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|-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|-48,34|17,52|-29,109|-73,109">
<tspan x="0" y="-2em">There is a good news</tspan>
<tspan x="0" y="-1em"> and a bad news for you.</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">Please tell</tspan>
<tspan x="0" y="-1em">me the bad</tspan>
<tspan x="0" y="0em">news first. </tspan>
</bubble>
</actor>
</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|-48,34|17,52|-29,109|-73,109">
<tspan x="0" y="-2em">There is a good news</tspan>
<tspan x="0" y="-1em"> and a bad news for you.</tspan>
<tspan x="0" y="3em">Your <tspan fill="red">cancer</tspan></tspan>
<tspan x="0" y="4em">screening test</tspan>
<tspan x="0" y="5em"> got positive result. </tspan>
<tspan x="0" y="6em"></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">Please tell</tspan>
<tspan x="0" y="-1em">me the bad</tspan>
<tspan x="0" y="0em">news first. </tspan>
</bubble>
</actor>
</scene>
<scene id="scene4">
<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">
</actor>
<actor t="translate(159,15)" pose="28,1|-40,35|-7,61|-7,51|28,71|28,51|18,31|18,1|33,26|38,1|-12,41|-17,21|3,41|3,21">
<bubble t="translate(-2,-9)" pose="0,0|25,52|-6,90|87,147|55,166|2,175">
<tspan x="0" y="-2em">I got cancer.</tspan>
<tspan x="0" y="-1em">so, I'm dying. </tspan>
<tspan x="0" y="3em">Wait!</tspan>
<tspan x="0" y="4em">What about</tspan>
<tspan x="0" y="5em">the good news? </tspan>
</bubble>
</actor>
</scene>
<scene id="scene5">
<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">The good news is: </tspan>
<tspan x="0" y="-1em">the average survival time of</tspan>
<tspan x="0" y="0em">your cancer is about 10 years</tspan>
<tspan x="0" y="1em">and scientists estimate that</tspan>
<tspan x="0" y="2em">the diagnosis and treatment</tspan>
<tspan x="0" y="3em">to cure your cancer will</tspan>
<tspan x="0" y="4em">available in about <tspan fill="red">10 years</tspan></tspan>
</bubble>
</actor>
<actor t="translate(159,15)" pose="28,1|2,103|28,91|28,81|44,71|44,51|34,31|29,1|49,26|54,1|23,71|18,51|38,71|38,51">
</actor>
</scene>
<scene id="scene6">
<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">The good news is: </tspan>
<tspan x="0" y="-1em">the average survival time of</tspan>
<tspan x="0" y="0em">your cancer is about 10 years</tspan>
<tspan x="0" y="1em">and scientists estimate that</tspan>
<tspan x="0" y="2em">the diagnosis and treatment</tspan>
<tspan x="0" y="3em">to cure your cancer will</tspan>
<tspan x="0" y="4em">available in about <tspan fill="red">10 years</tspan></tspan>
</bubble>
</actor>
<actor t="translate(159,15)" pose="28,1|2,103|28,91|28,81|44,71|44,51|34,31|29,1|49,26|54,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="1em">Is there any way to </tspan>
<tspan x="0" y="2em">make them working</tspan>
<tspan x="0" y="3em" fill="red"> faster! </tspan>
</bubble>
</actor>
</scene>
<scene id="scene7">
<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|-48,34|17,52|-29,109|-73,109">
<tspan x="0" y="-2em">You can donate your</tspan>
<tspan x="0" y="-1em"> genome sequence data</tspan>
<tspan x="0" y="0em"> for cancer research.</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">
</actor>
</scene>
<scene id="scene8">
<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|-48,34|17,52|-29,109|-73,109">
<tspan x="0" y="-2em">You can donate your</tspan>
<tspan x="0" y="-1em"> genome sequence data</tspan>
<tspan x="0" y="0em"> for cancer research.</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|-61,85">
<tspan x="0" y="-2em">I’ve given it</tspan>
<tspan x="0" y="-1em">to my hospital.</tspan>
<tspan x="0" y="0em">Can scientists</tspan>
<tspan x="0" y="1em">use the data? </tspan>
</bubble>
</actor>
</scene>
<scene id="scene9">
<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">
</actor>
<actor t="translate(159,15)" pose="28,1|-40,35|-7,61|-7,51|28,71|28,51|18,31|18,1|33,26|38,1|-12,41|-17,21|3,41|3,21">
<bubble t="translate(-2,-9)" pose="0,0|25,52|-6,90|87,147|55,166|2,175">
<tspan x="0" y="-2em">So, there is</tspan>
<tspan x="0" y="-1em">nothing can</tspan>
<tspan x="0" y="0em">really help?</tspan>
<tspan x="0" y="4em"></tspan>
<tspan x="0" y="5em"></tspan>
</bubble>
</actor>
</scene>
<scene id="scene10">
<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|12,-11|13,8|51,-2|-1,38|-69,50">
<tspan x="0" y="0em">Not really ...</tspan>
<tspan x="0" y="1em">I think you</tspan>
<tspan x="0" y="2em">need <tspan fill="red">DNA Digest</tspan>.</tspan>
</bubble>
</actor>
<actor t="translate(159,15)" pose="28,1|-40,35|-7,61|-7,51|28,71|28,51|18,31|18,1|33,26|38,1|-12,41|-17,21|3,41|3,21">
<bubble t="translate(-2,-9)" pose="0,0|25,52|-6,90|87,147|55,166|2,175">
<tspan x="0" y="-2em">So, there is</tspan>
<tspan x="0" y="-1em">nothing can</tspan>
<tspan x="0" y="0em">really help?</tspan>
<tspan x="0" y="4em"></tspan>
<tspan x="0" y="5em"></tspan>
</bubble>
</actor>
</scene>
</div></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment