Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
"Fixing" xkcd 1340 (or making the most redonkulous clock ever)

"Fixing" xkcd 1340 (or making the most redonkulous clock ever)

Update: feeling adventurous? Clone or fork the xkcd clock! If you just want to see it in action or get a glimpse of how it works, keep reading.


The date in xkcd's comic number 1340 does not change.


Since Randall publishes his comics under a permissive license, anyone can fix this problem and let the guy focus on more important issues, like writing great comics.

We propose the following approach:

  1. Grab the original image and erase the date using a raster graphics editor, such as the GIMP.
  2. Save the image to PNG and convert it to base 64.
  3. Obtain the xkcd font and convert it to a web font using FontSquirrel's font-face generator. Select the "expert" mode and check "Base 64 encode."
  4. Put all the parts together with HTML, CSS and Javascript, just like in the reference implementation

The results can be seen in

Overengineering the solution

In the spirit of the HTML clocks posted on HN, it is possible to make Cueball update its speech bubble every second, making the first instance of an xkcd-inspired clock that the author is aware of.


In this Gist, we have shown that it is possible to waste one's time to build an awesome clock using an xkcd comic strip as a clock face. The techniques shown in this work can be extended to other webcomics, or to newspaper comics that have been previously scanned.

Acknowledgements: Randall Munroe for the comics, Kyle Kelley and/or Brian E. Granger for the xkcd font, Mads Kristensen for the image to base64 converter and Font Squirrel for the font converter tool.

ssb402 commented Mar 12, 2014

Wow, this is cool! By the way, I didn't get why the image and font had to be converted to base64?

There is a slight difference when viewing on a retina display, you can notice some difference in the resolution of the picture and the font.


hausen commented Mar 12, 2014

@ssb402: The image and font are embedded in the CSS using a data URI, that's why. If you don't want/need to embed them, then you just have to host the original PNG and the webfont somewhere on the web.

If you add the following CSS to the #xkcddate section, the cursor won't change and you won't be able to highlight the text, just like an image. (see

div#xkcddate {
    // other things here ...
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;

tomlof commented Mar 12, 2014

This is cool! Now I'm waiting for a similar version of ;-)

mrphlip commented Mar 12, 2014

I wonder how hard it would be to edit the font so all the digits have the same width... the clock bouncing around as the seconds change width is a bit distracting...


hausen commented Mar 12, 2014

@christianbundy and @sloanesturz: thanks a lot! Your suggestions have been incorporated into .

  1. This is a great idea, and very well implemented!
  2. Thank you for pointing out that there is a good version of the XKCD font, I shall use it in my HTML port of Frequency (which is a good thing to look at if you're interested in other XKCD comics being HTML-ified.

@tomlof Yes! Do it!! Great idea!

eikes commented Mar 12, 2014

If you use a subset of the letters of the font, namely "1234567890:- " then the css file becomes smaller. You can also make the png a lot smaller. See both changes here (nothing visibly changes, only the base64 strings):

Together this decreases the css file from 46kb to 16kb!!!1!11!

You can add a 1px dropshadow to the text to compensate for the weight and aliasing differences.

text-shadow: 0 0 1px rgba(0,0,0,0.25);

@tomlof and @DouglasLivingstone
Here's a couple shell scripts I wrote for 1335. The first gets the images, and the second gives the path to the correct image for the current time. I have a cron job running that uses the second script to get the image for my desktop wallpaper.

coreh commented Mar 12, 2014

@hmottestad We could probably use canvas so that it's consistent on retina displays.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment