This is an Ika Musume clock in exactly 5 kilobytes (5120 bytes) of HTML and Javascript. No image and external resource used. You can save a copy in your computer and enjoy it.
You can also click the face and sea to change the appearance; there are three different themes and four different faces available. For the night theme Ika Musume will glow herself. The current theme and face will be saved, so it is fine to refresh.
Note: ika musume 5k requires a modern graphical browser. In the other words, Internet Explorer 8 or earlier is unsupported.
For those don't know how to view the source code, here it is.
<!doctype html><title>ika musume 5k</title><meta rel="shortcut icon" href="data:image/gif;base64,R0lGODlhEAAQAPEDADMzM8zMzP///w AAACH5BAUAAAMALAAAAAAQABAAAAI8nI+pAw2LgGgTsinwUzLIGVSJ9GXkKHiZGW4Gua7nAagx6Hal3L72jfPtYrWNY+KgOGiNgPO55CRdFksBADs="><style>html {height:100%}*{margin:0;cursor:default}p,canvas{position:absolute;left:50%;bottom:0}#A{font-family:Century Gothic,URW Gothic L, Gill Sans,sans-serif;height:100%;color:white;font-weight:100}#B{width:100%;height:250px;left:0}#C{left:0;bottom:50px}#E{height: 60px;width:320px;bottom:400px;margin-left:-160px;text-align:center;font-size:60px}#D{margin-left:-160px}</style><body IKAMUSUME id=A onselectstart=return!1><p id=B></p><canvas id=C height=200></canvas><canvas id=D width=320 height=400></canvas><p id=E></p ><img onload="var X,Y=document.createElement('canvas'),Z=[];Y.width=1638;Y.height=1;Y=Y.getContext('2d');Y.drawImage(this,0,0); Y=Y.getImageData(0,0,1638,1).data;for(X=0;X<6552;X+=4)Z.push(String.fromCharCode(Y[X],Y[X+1],Y[X+2]));eval(Z.join(''))" style=" display:none" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABmYAAAABCAIAAABL+YaUAAAACXZwQWcAAAZmAAAAAQCxtFU1AAAKyUlEQVRYR4 0YCXua2vL9lJT7NRcEDKDGREKMcYEDiFGz3VLaIuASjaSIS0LDb39zWEza197vxU+ZmTMzZ86sh/xnYwcHS6lrh9NiYC9d/5F5kha+Yy+GoR/YE+/Hj+hVHK+XTjjzl wffyTEVBV64DpYHru+sH71lWJx4YXvhYfDyGbnA8brnD97xj89P6+MawRH0+BXvupKeirO5/TX8WPrxg2PCDB1/LGN0LZmRUyP+4niBYOyamUEcAwDHAVA8ZjIabzGj mlk6Zo5PGZ4vW4xXMzmGrzIlgMc18/iEOanAyqnFuDX+lUn0lk+8TG8CYb0no3GuN6GleoVKhRH4E/hyieZTgeHL8D3lEuV8tcwInMAIQgmr5zL13ug4U18tl1L1Y+c 4V5/QUvX86QnDg+08X0nUC+Uq6CtjWqK/AupPGaGSKreY3Vswnkkq2klrc2WJYz8gsU/HEgHb4p+FxIm7om0uLHFBSwIVjWmJYBx/4QfsKvSfSII2k3Ua7EgZLZqgCN HGfASdkmjigKB5jivkrDTxkXj9ThINgiquvLARhsFstA49kliFzwtwGjGynfkk8NdLt4a1ODQh/i/pgN16o/ksZCeB7c4gc8jFbOnZAbPwxuHByA9DSMQEBlMhYcCy3 2p59F/YVPJNkwM/XpApIWgbn4oSx9I+X53As0MvS1mScOzlxl5hluJ25oZT6ZjjAJ56s8k0lIQKJ9rSGCd50wfFO5AQXOC2i+PZAqoETi0RwWREYqNGqQuTpYHnhCQH oQd9EEAOi2Bb75JNyknMcJQWZyVOpOkFFeEITqUlSRW4Ik9zxVOQWIWBP/fetrFx4KYQj5HJWVAnKci/gQIGQUcaTbzJFDaZnkEUYZdpusso2QUbNk8gMI+ZJRCw0QL HuAlS4li+AkaMvMlseQU9gsSHePQ33rVPjph5fiSM0TNmTruUOBtj+Bx7kYremNlks/cCmJIJvebnJKlXnF2X/092rYMF+GJcDP2WHdo3A52kklC/dZ8X3H3wcW3JtJ gF5MC4GHhPC9vxyKP4aMIQCOG4Z8WT+mlcXHjLSThNnbUAEWdqB03f9RohOaXYagnO8LReTcnFeZmrQ1FwBfInJiwIbFRtAbYk/hdAr/1er21OLVqCX1awxKw/2q+5I Q2JXnrbAziWx1xi05tSiWNaUoVpg4ntM6kJStpUdJnaYVpvZ1AkXlTOpBYwKNSl2bZSlharvPMLgsaxR8akkzrJl14AFB3Jh8zaK3wAFDrEo+Rn9rMC42GbJmDK5OxR nCTdBbNu0jHyOFuSE+aR5U8oMSOtgKTSm6MSVSChAxY2R4+U6KWm+eaEFix6U3AYDJYw+EC9LkgB+nYFyj5PIQ/Moh3GA3Poh/TEE/As2MDyAjbjmBpBpr7MvKC5DjK RSSoywa3rIQGEnFLKKeWcUkkUj/IM9cxH9sSihWKlgNcf2WqKAI8v5av4IVgFgToqiZOUWk2pfEYdFb+vbTeww5mT2+XTAqgEWwoPTKqASSWo33KzCTebc59Y7Hub2M ymn+yGMcimDHzJYvfuwlFhwVnnOHjs7z1GZ6LYH2zuMzb3WUrJcT7RPdpXL4C49ZHvks3G+eWkuZWmmYPza0H6DM+9C6+D08yB9kW9y72S+HDm5IXz8LsQO+YDFnug+ fQhpI9S+iinjwoo9Q/5w8NR0Vn4Ky9rZf75uXBYxdTUaEyoYHTfjPanWJCQnlSU+rhpP0Evxk2I2J8969B/lUolIgtF2uhJB5RSR0LmmpTPhAkNN4LxGD88Z0Qk1w83 wU6q+IH1MGnDxzMEPkWBIizTSWy28L5T2/W3TTzRYd/qqU3siZeLdSA5h8Lh4a7o1v2CVuPE0fsu/pr2u2yQOws8OBNzRSA1gZROwu k+FCMpW/h1DsIAg WYwg3yaneGuM6NyERdobtqrXGpuzqysPdg7EmP4kndpuhZeIDOATmcfV8G/J/SlSbo0T30km/CL1wvYCXjCzCGFzltUNJPmZgvqh uUTS3/aM sJKwSGzcQihTZ Ck4cyo1/mePN/T4LRHzUTL+8NEroSNTTJ3mx7gyd+SPOsetSAkFeqnWPP0nsNl+HT1twN8Vxwz23RCj365R2Tr3tv6++m7Lxf2 uF1iWIGjsoPz 6cFdWipR0Vb KHJrY3cEY1AfgjJzAQrL2aym5hSmzLWwLVSZxO2CdQifFBIzJBblQpV73fWZvwb5+3lVOkjCt3ySMiGsQLmz761EJrhtlu CyIcBXJpl5itibhO 1ClsJ8g 9PxjpV06OgFeRpUAZRvUEUiK4LLRRt943yuRjr5bwyEa1ocfrOgMfajU66g+rOMpTxIX6uouGMTGo/Gp75rfrsaqcaHL P cVQe0oPqYoGH0O+jlPuv r zpAfd gG9vIanyRvyDjStcMzUBXqIeAF2mo19tzK1sz6MfNtdrylKHlyRbqtww0QFdDQ71COjLg2zWucvbO2gj7cSdUL0bNz5 87 d8pENr o9tYe6 Sl dFqm EMUBffMkniZbC5DrV4I/nMV1nV+priNkKViWNxY8gvsQaWy3e0FUlxfLPWhj7SBx0ko+eL80CM47Vqu1c60i478ssF v6 pT cao1GK61XQ/J Rk eD P2M INmodTVZanZaE2jlPYIW9drdjKH2kX3VVWW9rl2oTye12R0t5NoPdINLjC6szVK7QnaJd3B7a8ifZ2qBbT3PUldpo Vx uHR6ftcySrNeVCqTeP42M7 zu x4 6W0HO6P+EMfKII7v4Vhx79s1+G1QigfzOEZncdw+BGp10kQdVGX2crve86e20gKvoqu+qmPjG7KSWd5b9yJTQbKmw kcHD4 FH ZBnlsuH1 zv yzbDR8+ fz 5z8LRffQvG+/uV/8mvOtu7uOhu1a1LVI/lWJVg7NJX3d1tIFMpfeni/TNP7H+sNW0naZ2uVjVgU92I0kOzmWZzPkGu 95OvdQ F q SPK4v X p rWKg2xUQ 8uX w007tdW1BrimNWu3SaGvtZ9TdLz93t/W4G3QHM304v7cUCz1WtcZVQY/O8A4zCb9I4+FjmaEluhhNCAk6zVEhQW3S JFb 3696qH h uXA7kPZ RXDCF vd h73VeWx0Bmpf7RkxgXsPlXG/3IXnsaYMYUntptwvd1sgta6UvtLT33N/Wfe3AwQFqulaV9ZltYPastYEofX8ubc9irX6 Te euY yRC bi4U 3e0 Gqtx Fqqb pkOyQQjL4IBGKbjdFBCV/o9yp3eF7qc0wGqxRp98379E9GlY7DUX+AKwgthkGAz9WFw6aKsrfsdL+gE67CX13HUKBqAM D Sl1 ryG1FhkL RQO vU S kq+o e/MVS/uh1p/Ylh3pvFF7SvYKYZxo/XULlJUXetpw7xDaDt924u7K605bdnVLw1b7qNBp5/2Kbkn32Y5EA6j4Vb8W3mu B +rp w1CN46GA62 V69W 1 cu6F d4fbmK5SbVxuc3t/cTa1/9HqrGOvf4njQjuOT9fm2fnSo5NUcQR5+uwf5T+VAQ1sdqjh2aoCv6qG0ulBf6iiov2jZ3l E/Q lHdvYnj2xNvd/5d2SDlS6 Df m Z6UF DjMAOglxdly6QXKdVeXAnKOJ4Lir4MVScELG7zLZ7TubAmver9Sh57jL11MzV8M/SXcV5x5fiHJ0fyqBu822f+VpJVE rvD 9oSQ+w0QSs4H0R4GxFE pk i AXKr 1hChPckEV5DEf5/wsZekIgpcdTBfwEcMNiMZ59TSgAAAABJRU5ErkJggg=="><!-- by Kang Seonghoon http://cosmic.mearie.org/2010/12/ika5k/ -->
ika musume 5k uses some of modern web technologies (colloquially called HTML5, if you prefer) to achieve the small size:
data
URL schemelocalStorage
)(I originally planned to use SVG with HTML canvas, but an inline SVG in text/html
is not yet widely supported.)
The code compression is done by three phases: manual code restructuring, minification and PNG compression. PNG compression did work well—shaves 20% of the total code—and also used to embed a small image of Ika Musume to the final code (as base64 encoding silently ignores whitespaces). Minification is done via Closure Compiler's advanced optimization. The manual restructuring is done because there are still lots of optimizations that Closure Compiler cannot figure out, for example, how to save the large paths (I delta-encoded them into small strings).
The paths themselves are drawn by myself, albeit with a help of several reference images. There are also great amount of heuristics to adjust parameters; for example, I experimented with several options for implementing the interactive sea. (Could you figure out the final choice?)
The original, pre-compressed version is available in here. Still slightly obfuscated as I kept the obfuscation in mind from the first time, but there are some helpful comments.
Shinryaku! Ika Musume is copyright © Masahiro Anbe (安部真弘). All rights reserved.
Kang Seonghoon — Kawaii ja naika?