Skip to content

Instantly share code, notes, and snippets.

@JohnLBevan

JohnLBevan/index.html

Forked from darwin/index.html
Last active December 13, 2015 17:38
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JohnLBevan/4949114 to your computer and use it in GitHub Desktop.
Save JohnLBevan/4949114 to your computer and use it in GitHub Desktop.
Download ZIP
Harlem Shake XKCD Style (thanks to cmx.io)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<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>
<script type="text/javascript">
<!--
var frame2 = true;
var vis = {};
vis[true] = "block";
vis[false] = "none";
window.onload = function(){document.getElementById("scene2y").style.display = vis[false];};
setTimeout(function(){setInterval(function(){swapFrames()},200);},3000);
function swapFrames()
{
document.getElementById("scene2x").style.display = vis[frame2];
frame2 = !frame2;
document.getElementById("scene2y").style.display = vis[frame2];
}
-->
</script>
<style>.cmx-user-scene4 .cmx-text-border .cmx-path {stroke: orange}</style>
</head>
<body>
<div style="max-width:900px; -webkit-transform:rotate(0deg);">
<scene id="scene1">
<label t="translate(0,346)">
<tspan x="0" y="0em">Harlem Shake (XKCD edition)</tspan>
</label>
<drawing t="translate(0,31)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</drawing>
<!-- helmet; place behind head to cheat the circle -->
<drawing t="translate(55,110)">
<line stroke="black">
<point x="0" y="0"></point>
<point x="10" y="2"></point>
<point x="-4" y="2"></point>
<point x="12" y="5"></point>
<point x="-7" y="4"></point>
<point x="14" y="8"></point>
</line>
<line stroke="red">
<point x="-10" y="5"></point>
<point x="15" y="11"></point>
<point x="-10" y="8"></point>
<point x="14" y="15"></point>
<point x="-10" y="11"></point>
<point x="12" y="16"></point>
<point x="-10" y="14"></point>
<point x="12" y="19"></point>
<point x="-10" y="17"></point>
<point x="12" y="22"></point>
<point x="-10" y="20"></point>
<point x="12" y="25"></point>
<point x="-10" y="23"></point>
<!--<point x="" y=""></point>-->
</line>
</drawing>
<actor t="translate(26,20) rotate(-15)" pose="-11,9|4,107|-11,99|-11,89|-18,78|-10,57|0,27|-5,2|17,29|15,15|-8,79|5,57|2,82|9,66">
<bubble t="translate(9,11)" pose="0,0|-20,10|-81,49|14,94|-26,173|-100,127">
<tspan x="0" y="-3em">Con los teroristas</tspan>
<tspan x="0" y="0em">Wub wub wub wub wub wub, wub wub</tspan>
<tspan x="0" y="1em">wub tas, wub wub, wub, wub wub wub</tspan>
<tspan x="0" y="2em">Wub wub wub wub wub wub, wub wub wub </tspan>
<tspan x="0" y="3em">tas wub wub, wub, wub tas wub wub tas</tspan>
<tspan x="0" y="4em">tas wub tas wub tas</tspan>
<tspan x="0" y="5em">wub tas wub tas tas</tspan>
</bubble>
</actor>
<actor t="translate(140,22)" pose="29,1|7,103|28,69|28,59|28,71|28,51|17,32|17,2|33,26|38,1|19,45|18,64|38,52|36,30"></actor>
<!-- table -->
<drawing t="translate(100,10) rotate(3)">
<line stroke="brown">
<point x="0" y="0"></point><!-- bottom left leg bottom -->
<point x="0" y="30"></point><!-- bottom left leg top -->
<point x="50" y="50"></point><!-- top left leg top -->
<point x="50" y="20"></point><!-- top left leg bottom -->
<point x="50" y="50"></point><!-- top left leg top -->
<point x="140" y="50"></point><!-- top right leg top -->
<point x="140" y="20"></point><!-- top right leg bottom -->
<point x="140" y="50"></point><!-- top right leg top -->
<point x="90" y="30"></point><!-- bottom right leg top -->
<point x="90" y="0"></point><!-- bottom right leg bottom -->
<point x="90" y="30"></point><!-- bottom right leg top -->
<point x="0" y="30"></point><!-- bottom left leg top -->
<!-- end of wireframe - begin dodgy colouring in time -->
<point x="55" y="50"></point>
<point x="5" y="30"></point>
<point x="60" y="50"></point>
<point x="10" y="30"></point>
<point x="65" y="50"></point>
<point x="15" y="30"></point>
<point x="70" y="50"></point>
<point x="20" y="30"></point>
<point x="75" y="50"></point>
<point x="25" y="30"></point>
<point x="80" y="50"></point>
<point x="30" y="30"></point>
<point x="85" y="50"></point>
<point x="35" y="30"></point>
<point x="90" y="50"></point>
<point x="40" y="30"></point>
<point x="95" y="50"></point>
<point x="45" y="30"></point>
<point x="100" y="50"></point>
<point x="50" y="30"></point>
<point x="105" y="50"></point>
<point x="55" y="30"></point>
<point x="110" y="50"></point>
<point x="60" y="30"></point>
<point x="115" y="50"></point>
<point x="65" y="30"></point>
<point x="120" y="50"></point>
<point x="70" y="30"></point>
<point x="125" y="50"></point>
<point x="75" y="30"></point>
<point x="130" y="50"></point>
<point x="80" y="30"></point>
<point x="135" y="50"></point>
<point x="85" y="30"></point>
<point x="140" y="50"></point>
<point x="90" y="30"></point>
</line>
</drawing>
<actor t="translate(102,-14) rotate(2)" pose="30,1|36,118|28,72|28,62|28,67|28,47|20,35|20,25|39,32|38,22|17,61|29,58|41,59|49,60"></actor>
<actor t="translate(187,-4)" pose="31,1|6,128|27,82|27,72|28,71|28,51|10,42|12,23|21,49|23,28|15,63|2,61|37,66|39,53"></actor>
</scene>
<div id="scene2x">
<scene id="scene2">
<label t="translate(0,346)">
<tspan x="0" y="0em">"And do the Harlem Shake"</tspan>
</label>
<drawing t="translate(0,31)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</drawing>
<!-- helmet; place behind head to cheat the circle -->
<drawing t="translate(68,129) rotate(76)">
<line stroke="black">
<point x="0" y="0"></point>
<point x="10" y="2"></point>
<point x="-4" y="2"></point>
<point x="12" y="5"></point>
<point x="-7" y="4"></point>
<point x="14" y="8"></point>
</line>
<line stroke="red">
<point x="-10" y="5"></point>
<point x="15" y="11"></point>
<point x="-10" y="8"></point>
<point x="14" y="15"></point>
<point x="-10" y="11"></point>
<point x="12" y="16"></point>
<point x="-10" y="14"></point>
<point x="12" y="19"></point>
<point x="-10" y="17"></point>
<point x="12" y="22"></point>
<point x="-10" y="20"></point>
<point x="12" y="25"></point>
<point x="-10" y="23"></point>
<!--<point x="" y=""></point>-->
</line>
</drawing>
<actor t="translate(43,18) rotate(-15)" pose="-11,9|-19,119|-13,101|-13,91|-17,64|-6,58|5,29|0,4|21,30|19,16|-15,79|3,59|-3,74|14,68">
<bubble t="translate(9,11)" pose="0,0|-20,10|-40,33|-8,51|-29,79|-86,157">
<tspan x="0" y="0em">Wub wub wub wub wub wub, wub wub</tspan>
<tspan x="0" y="1em">Shake</tspan>
<tspan x="0" y="2em">Wub wub wub wub wub wub, wub wub wub </tspan>
<tspan x="0" y="3em">Shake</tspan>
<tspan x="0" y="4em">Wub Wub tas wub tas wub tas</tspan>
<tspan x="0" y="5em">Con los teroristas</tspan>
<tspan x="0" y="6em">Grrrrrrr</tspan>
</bubble>
</actor>
<actor t="translate(137,14)" pose="29,1|23,147|29,96|29,86|34,92|36,67|25,48|25,18|41,42|46,17|4,88|2,111|46,103|53,136"></actor>
<!-- table -->
<drawing t="translate(100,10) rotate(3)">
<line stroke="brown">
<point x="0" y="0"></point><!-- bottom left leg bottom -->
<point x="0" y="30"></point><!-- bottom left leg top -->
<point x="50" y="50"></point><!-- top left leg top -->
<point x="50" y="20"></point><!-- top left leg bottom -->
<point x="50" y="50"></point><!-- top left leg top -->
<point x="140" y="50"></point><!-- top right leg top -->
<point x="140" y="20"></point><!-- top right leg bottom -->
<point x="140" y="50"></point><!-- top right leg top -->
<point x="90" y="30"></point><!-- bottom right leg top -->
<point x="90" y="0"></point><!-- bottom right leg bottom -->
<point x="90" y="30"></point><!-- bottom right leg top -->
<point x="0" y="30"></point><!-- bottom left leg top -->
<!-- end of wireframe - begin dodgy colouring in time -->
<point x="55" y="50"></point>
<point x="5" y="30"></point>
<point x="60" y="50"></point>
<point x="10" y="30"></point>
<point x="65" y="50"></point>
<point x="15" y="30"></point>
<point x="70" y="50"></point>
<point x="20" y="30"></point>
<point x="75" y="50"></point>
<point x="25" y="30"></point>
<point x="80" y="50"></point>
<point x="30" y="30"></point>
<point x="85" y="50"></point>
<point x="35" y="30"></point>
<point x="90" y="50"></point>
<point x="40" y="30"></point>
<point x="95" y="50"></point>
<point x="45" y="30"></point>
<point x="100" y="50"></point>
<point x="50" y="30"></point>
<point x="105" y="50"></point>
<point x="55" y="30"></point>
<point x="110" y="50"></point>
<point x="60" y="30"></point>
<point x="115" y="50"></point>
<point x="65" y="30"></point>
<point x="120" y="50"></point>
<point x="70" y="30"></point>
<point x="125" y="50"></point>
<point x="75" y="30"></point>
<point x="130" y="50"></point>
<point x="80" y="30"></point>
<point x="135" y="50"></point>
<point x="85" y="30"></point>
<point x="140" y="50"></point>
<point x="90" y="30"></point>
</line>
</drawing>
<actor t="translate(112,26) rotate(2)" pose="30,1|32,156|16,114|16,104|8,92|8,72|19,62|14,33|29,65|26,39|5,103|22,80|29,101|37,94"></actor>
<actor t="translate(182,33) rotate(5)" pose="31,1|59,117|23,99|23,89|20,73|27,60|7,46|16,22|17,50|24,30|12,73|3,75|33,86|5,85"></actor>
<!-- helmet; place behind head to cheat the circle -->
<drawing t="translate(130,124) rotate(-43)" pose="-2,-29">
<line stroke="pink">
<point x="0" y="0"></point>
<point x="10" y="2"></point>
<point x="-4" y="2"></point>
<point x="12" y="5"></point>
<point x="-7" y="4"></point>
<point x="14" y="8"></point>
<point x="-10" y="5"></point>
<point x="15" y="11"></point>
<point x="-10" y="8"></point>
</line>
<line stroke="green">
<point x="14" y="15"></point>
<point x="-10" y="11"></point>
<point x="12" y="16"></point>
<point x="-10" y="14"></point>
<point x="12" y="19"></point>
<point x="-10" y="17"></point>
<point x="12" y="22"></point>
<point x="-10" y="20"></point>
<point x="12" y="25"></point>
<point x="-10" y="23"></point>
<!--<point x="" y=""></point>-->
</line>
</drawing>
<actor t="translate(108,10)" pose="0,0|6,97|0,90|0,80|6,73|6,53|-10,33|-8,8|11,33|10,3|-10,70|-14,53|10,70|17,50"></actor>
<actor t="translate(171,135) rotate(176)" pose="2,7|2,113|2,97|2,87|-9,94|3,71|-16,63|-9,34|15,55|24,48|-19,98|-23,124|27,98|30,130"></actor>
<actor t="translate(226,18)" pose="0,0|0,89|0,82|0,72|0,70|0,50|-10,30|-10,5|13,30|11,6|-14,65|-12,50|17,66|19,50"></actor>
<actor t="translate(225,18)" pose="-149,3|-148,96|-148,80|-148,70|-149,67|-149,47|-159,27|-153,-3|-139,27|-144,1|-166,77|-185,108|-132,62|-132,42"></actor>
<actor t="translate(212,214)" pose="0,0|6,106|0,90|-13,64|10,71|12,55|20,49|35,25|25,75|33,59|-34,101|-42,81|26,86|35,114"></actor>
</scene>
</div>
<div id="scene2y">
<scene id="scene2b">
<label t="translate(0,346)">
<tspan x="0" y="0em">"And do the Harlem Shake"</tspan>
</label>
<drawing t="translate(0,31)">
<line stroke="green">
<point x="0" y="0"></point>
<point x="250" y="20"></point>
</line>
</drawing>
<!-- helmet; place behind head to cheat the circle -->
<drawing t="translate(55,130) rotate(120)">
<line stroke="black">
<point x="0" y="0"></point>
<point x="10" y="2"></point>
<point x="-4" y="2"></point>
<point x="12" y="5"></point>
<point x="-7" y="4"></point>
<point x="14" y="8"></point>
</line>
<line stroke="red">
<point x="-10" y="5"></point>
<point x="15" y="11"></point>
<point x="-10" y="8"></point>
<point x="14" y="15"></point>
<point x="-10" y="11"></point>
<point x="12" y="16"></point>
<point x="-10" y="14"></point>
<point x="12" y="19"></point>
<point x="-10" y="17"></point>
<point x="12" y="22"></point>
<point x="-10" y="20"></point>
<point x="12" y="25"></point>
<point x="-10" y="23"></point>
<!--<point x="" y=""></point>-->
</line>
</drawing>
<actor t="translate(43,18) rotate(-15)" pose="-11,9|-40,108|-13,101|-13,91|10,80|-6,58|3,28|-2,3|21,30|19,16|-15,79|3,59|-3,74|14,68">
<bubble t="translate(9,11)" pose="0,0|-20,10|-40,33|-8,51|-29,79|-60,174">
<tspan x="0" y="0em">Wub wub wub wub wub wub, wub wub</tspan>
<tspan x="0" y="1em">Shake</tspan>
<tspan x="0" y="2em">Wub wub wub wub wub wub, wub wub wub </tspan>
<tspan x="0" y="3em">Shake</tspan>
<tspan x="0" y="4em">Wub Wub tas wub tas wub tas</tspan>
<tspan x="0" y="5em">Con los teroristas</tspan>
<tspan x="0" y="6em">Grrrrrrr</tspan>
</bubble>
</actor>
<actor t="translate(137,14)" pose="29,1|14,145|29,96|29,86|34,92|36,67|25,48|25,18|41,42|46,17|4,88|-3,111|46,103|48,138"></actor>
<!-- table -->
<drawing t="translate(100,10) rotate(3)">
<line stroke="brown">
<point x="0" y="0"></point><!-- bottom left leg bottom -->
<point x="0" y="30"></point><!-- bottom left leg top -->
<point x="50" y="50"></point><!-- top left leg top -->
<point x="50" y="20"></point><!-- top left leg bottom -->
<point x="50" y="50"></point><!-- top left leg top -->
<point x="140" y="50"></point><!-- top right leg top -->
<point x="140" y="20"></point><!-- top right leg bottom -->
<point x="140" y="50"></point><!-- top right leg top -->
<point x="90" y="30"></point><!-- bottom right leg top -->
<point x="90" y="0"></point><!-- bottom right leg bottom -->
<point x="90" y="30"></point><!-- bottom right leg top -->
<point x="0" y="30"></point><!-- bottom left leg top -->
<!-- end of wireframe - begin dodgy colouring in time -->
<point x="55" y="50"></point>
<point x="5" y="30"></point>
<point x="60" y="50"></point>
<point x="10" y="30"></point>
<point x="65" y="50"></point>
<point x="15" y="30"></point>
<point x="70" y="50"></point>
<point x="20" y="30"></point>
<point x="75" y="50"></point>
<point x="25" y="30"></point>
<point x="80" y="50"></point>
<point x="30" y="30"></point>
<point x="85" y="50"></point>
<point x="35" y="30"></point>
<point x="90" y="50"></point>
<point x="40" y="30"></point>
<point x="95" y="50"></point>
<point x="45" y="30"></point>
<point x="100" y="50"></point>
<point x="50" y="30"></point>
<point x="105" y="50"></point>
<point x="55" y="30"></point>
<point x="110" y="50"></point>
<point x="60" y="30"></point>
<point x="115" y="50"></point>
<point x="65" y="30"></point>
<point x="120" y="50"></point>
<point x="70" y="30"></point>
<point x="125" y="50"></point>
<point x="75" y="30"></point>
<point x="130" y="50"></point>
<point x="80" y="30"></point>
<point x="135" y="50"></point>
<point x="85" y="30"></point>
<point x="140" y="50"></point>
<point x="90" y="30"></point>
</line>
</drawing>
<actor t="translate(112,26) rotate(2)" pose="30,1|38,137|14,101|14,91|8,92|8,72|15,53|10,24|25,54|22,28|3,90|20,67|27,88|31,67"></actor>
<actor t="translate(182,33) rotate(5)" pose="31,1|38,138|23,99|23,89|24,73|31,60|11,46|13,20|21,50|25,26|12,73|3,75|33,86|7,73"></actor>
<!-- helmet; place behind head to cheat the circle -->
<drawing t="translate(116,127) rotate(10)" pose="-2,-29">
<line stroke="pink">
<point x="0" y="0"></point>
<point x="10" y="2"></point>
<point x="-4" y="2"></point>
<point x="12" y="5"></point>
<point x="-7" y="4"></point>
<point x="14" y="8"></point>
<point x="-10" y="5"></point>
<point x="15" y="11"></point>
<point x="-10" y="8"></point>
</line>
<line stroke="green">
<point x="14" y="15"></point>
<point x="-10" y="11"></point>
<point x="12" y="16"></point>
<point x="-10" y="14"></point>
<point x="12" y="19"></point>
<point x="-10" y="17"></point>
<point x="12" y="22"></point>
<point x="-10" y="20"></point>
<point x="12" y="25"></point>
<point x="-10" y="23"></point>
<!--<point x="" y=""></point>-->
</line>
</drawing>
<actor t="translate(108,10)" pose="0,0|6,97|0,90|0,80|0,70|0,50|-10,30|-5,3|10,30|10,0|-10,70|-10,50|10,70|10,50"></actor>
<actor t="translate(171,135) rotate(176)" pose="6,7|6,113|6,97|6,87|-8,94|4,71|-15,63|-13,36|14,51|19,41|-15,98|-19,124|31,98|34,130"></actor>
<actor t="translate(226,18)" pose="0,0|0,89|0,82|0,72|0,70|0,50|-10,30|-4,5|13,30|8,6|-13,63|-7,50|15,63|17,47"></actor>
<actor t="translate(225,18)" pose="-149,3|-149,109|-149,93|-149,83|-149,73|-149,53|-159,33|-159,3|-139,33|-139,3|-167,90|-176,121|-139,73|-139,53"></actor>
<actor t="translate(212,214)" pose="0,0|0,106|0,90|-13,64|10,71|12,55|20,49|35,25|25,75|33,59|-34,101|-38,135|26,86|35,114"></actor>
</scene>
</div>
<scene id="scene3" height="160">
<label t="translate(-2,188)" pose="0,-10|7,-30">
<tspan x="0" y="0em">Non Web Addicts</tspan>
</label>
<actor t="translate(111,7) rotate(2)" pose="-41,48|-10,105|0,88|0,78|0,68|0,48|-5,23|-10,-2|5,23|10,-2|-11,70|-4,54|17,86|-4,110">
<bubble t="translate(88,-55)" pose="-12,5|-111,42|-144,29|-129,57|-159,64|-177,75">
<tspan x="0" y="0em" fill="red">WTF?!</tspan>
</bubble>
</actor>
</scene>
<scene id="scene4" width="300" height="150" margin-y="3" frame="no">
<label t="translate(11,133)" pose="-10,14|-9,5">
<tspan x="0" y="0em">~ comix markup</tspan>
<tspan x="0" y="1em">~ can be mixed with HTML</tspan>
<tspan x="0" y="2em">~ WYSIWYG editor</tspan>
<tspan x="0" y="3em">~ open-source</tspan>
<tspan x="0" y="4em">~ backed by </tspan><tspan fill="blue">gist.github.com</tspan>
<tspan x="0" y="5em">~ xkcd harlem shake by </tspan><tspan fill="green">JohnLBevan</tspan>
</label>
<actor t="translate(211,44) rotate(-4)" pose="73,-56|77,58|79,38|87,22|81,12|82,1|63,-18|57,-40|89,-14|93,-38|69,23|51,30|71,15|43,19">
</actor>
</scene>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment