Skip to content

Instantly share code, notes, and snippets.

@brianseitel

brianseitel/index.html

Created February 12, 2013 21:50
Show Gist options
  • Save brianseitel/4773702 to your computer and use it in GitHub Desktop.
Save brianseitel/4773702 to your computer and use it in GitHub Desktop.
Download ZIP
a birthday cmx.io
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"></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 day in San Francisco</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="-3em">I have a plan</tspan>
<tspan x="0" y="0em">A master plan,</tspan>
<tspan x="0" y="1em">if you will</tspan>
<tspan x="8" y="65px">but first,</tspan>
<tspan x="8" y="78px">we scuba dive</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|-38,97|53,115|2,159|-30,176">
<tspan x="0" y="0em">A plan?!</tspan>
<tspan x="0" y="5em">I'm not sure</tspan>
<tspan x="0" y="6em">I like this...</tspan>
<tspan x="0" y="9em">...okay?</tspan>
</bubble>
</actor>
</scene>
<scene id="scene2" height="1500">
<label t="translate(0,1500) rotate(-6)">
<tspan x="0" y="0em">Under water</tspan>
</label>
<label t="translate(0,1200) rotate(-6)">
<tspan x="0" y="0em">15 feet</tspan>
</label>
<label t="translate(0,950) rotate(3)">
<tspan x="0" y="0em">35 feet</tspan>
</label>
<label t="translate(0,600) rotate(14)">
<tspan x="0" y="0em">50 feet</tspan>
</label>
<label t="rotate(2)">
<tspan x="0" y="0em">Bottom of the Ocean</tspan>
</label>
<drawing t="translate(0,31) rotate(-5)" pose="-122,1396">
<line stroke="blue">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</drawing>
<actor t="translate(71,19) rotate(-79)" pose="-1198,255|-1188,360|-1198,345|-1198,335|-1198,325|-1198,305|-1203,280|-1208,255|-1193,280|-1188,255|-1205,325|-1205,305|-1193,325|-1184,300">
<bubble t="translate(253,-75) rotate(75)" pose="-78,-10|-23,-62|-63,-62|-11,27|-60,13|-115,29">
<tspan x="0" y="1em">This is so pretty!</tspan>
<tspan x="0" y="4em">Look! An otter!!</tspan>
</bubble>
</actor>
<actor t="translate(142,17) rotate(-81)" pose="-1273,95|-1271,203|-1273,185|-1273,175|-1273,165|-1273,145|-1278,128|-1279,86|-1268,120|-1270,87|-1278,165|-1283,145|-1263,165|-1263,145">
<bubble t="translate(0,-75) rotate(75)" pose="21,-521|76,-573|36,-573|88,-484|39,-498|55,-521">
<tspan x="0" y="1em">Look at me!</tspan>
<tspan x="0" y="4em">I'm upside down!'</tspan>
</bubble>
</actor>
<actor t="translate(94,885) rotate(96)" pose="13,-122|2,-6|13,-32|13,-42|13,-52|13,-72|8,-89|7,-131|18,-97|16,-130|8,-52|3,-72|23,-52|23,-72">
<bubble t="translate(-635,80) rotate(-101)" pose="-17,-41|87,-103|65,-58|151,-57|101,-28|35,-14">
<tspan x="0" y="1em">What's your plan?</tspan>
<tspan x="45px" y="5em">Oh...</tspan>
</bubble>
</actor>
<actor t="translate(96,885) rotate(156)" pose="28,15|17,131|28,105|28,95|28,85|28,65|23,48|22,6|33,40|31,7|23,85|18,65|38,85|38,65">
<bubble t="translate(-187,504) rotate(-151)" pose="-17,-41|87,-103|65,-58|125,-88|75,-59|28,-40">
<tspan x="0" y="1em">Oh, that's a</tspan>
<tspan x="1" y="2em">secret, ya know.</tspan>
</bubble>
</actor>
<actor t="translate(119,129) rotate(-5)" pose="61,-111|50,5|61,-21|61,-31|61,-41|61,-61|56,-78|55,-120|66,-86|64,-119|56,-41|46,-66|71,-41|71,-61">
<bubble t="translate(-136,1245)" pose="-78,-10|-23,-62|-63,-62|-63,17|-112,3|-115,29">
<tspan x="0" y="1em">Let's go to</tspan>
<tspan x="0" y="2em">the bottom!</tspan>
<tspan x="0" y="4em">Race ya!</tspan>
</bubble>
</actor>
<actor t="translate(19,128) rotate(-5)" pose="61,-111|66,8|61,-21|61,-31|61,-41|61,-61|56,-78|55,-120|67,-86|71,-119|55,-46|50,-66|71,-41|96,-29">
<bubble t="translate(-25,1288)" pose="-4,-4|34,-134|-4,-134|43,-47|21,-47|-14,-4">
<tspan x="0" y="3em">Be careful!</tspan>
<tspan x="0" y="5em">*sigh*...</tspan>
</bubble>
</actor>
</scene>
<scene id="scene3" height="230" margin-y="1290">
<label t="translate(189,0) rotate(-6)" pose="0,-10|-74,-5">
<tspan x="0" y="0em">To be continued...</tspan>
</label>
<actor t="translate(209,4) rotate(2)" pose="-41,48|-1,110|0,88|0,78|0,68|0,48|-5,23|-10,-2|5,23|10,-2|-10,64|-11,45|11,73|9,40">
<bubble t="translate(-2,-9)" pose="0,0|-132,13|-148,41|-77,24|-90,107|-141,95">
<tspan x="0" y="-1em">I just wanted</tspan>
<tspan x="0" y="1em">to tell you... </tspan>
<tspan x="0" y="3em">Happy birthday, babe!</tspan>
</bubble>
</actor>
<actor t="translate(54,4) rotate(2)" pose="-41,48|4,110|0,88|0,78|0,68|0,48|-5,23|-10,-2|5,23|10,-2|-11,70|-4,54|17,73|49,73">
<bubble t="translate(82,-51)" pose="58,-28|-1,-4|-17,24|16,45|45,42|-2,40">
<tspan x="0" y="1em">I..</tspan>
<tspan x="0" y="3em">I like </tspan>
<tspan x="-1em" y="4em">this plan</tspan>
</bubble>
</actor>
</scene>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment