I recently came across two new things. The first, an excellent bit of code by Antonin Hildebrand cmx.io. This code allows people to easily create XKCD style comics through simple markup, and also includes a useful wysiwyg editor to make tweaking the pictures simpler.
The second was a slew of videos in my YouTube feed with the latest meme: The Harlem Shake.
My instant reaction was to create my first meme whilst trying out my new toy: here’s the result (click the image to go to the animated markup version):
Harlem Shake XKCD Edition created with cmx.io
Code included below (also available on GitHub: https://gist.github.com/JohnLBevan/4949114.
Update (2013-02-14 22:12 UTC)
Code updated to include animation of second frame.
<!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>
Developer42 