Skip to content

Instantly share code, notes, and snippets.

@aemkei
Last active Aug 29, 2015
Embed
What would you like to do?
A Snow Animation in 90 Bytes of HTML and JavaScript
<body id=p onload=setInterval('z=p.innerText=Array(i=i*2%99).join(" ")+"*\\n"+z',i=z=80)>
@p01
Copy link

p01 commented Dec 27, 2014

Nice... and dirty with the ever increasing innerHTML

<pre id=p><script>setInterval('p[i="innerHTML"]=Array(Math.random()*80|0).join(" ")+"*\\n"+p[i]',80)</script>

@subzey
Copy link

subzey commented Dec 27, 2014

Let it snow, let it snow, let it snow!

<pre id=p><svg onload=setInterval('z=p.innerHTML=Array(Math.random()*80|0).join("\x20")+"*\\n"+z',80,z="")>

@p01
Copy link

p01 commented Dec 27, 2014

And another 3 bytes

<pre id=p><svg onload=setInterval('z=p.innerHTML=Array(Math.random()*80|0).join("\x20")+"*\\n"+z',80)>

Great <svg onload> trick!

@jed
Copy link

jed commented Dec 27, 2014

awesome work as always, folks!

@aemkei
Copy link
Author

aemkei commented Dec 27, 2014

Using the Unicode Character 'NO-BREAK SPACE' (U+00A0) will save another 2 bytes. Now down to 102 bytes.

<pre id=p><svg onload=setInterval('z=p.innerHTML=Array(Math.random()*80|0).join(" ")+"*\\n"+z',z=80)>

@aemkei
Copy link
Author

aemkei commented Dec 27, 2014

Using Array((i*=2)%79) instead of Array(Math.random()*80|0) will save some 8 bytes:

<pre id=p><svg onload=setInterval('z=p.innerHTML=Array(i=i*2%79).join(" ")+"*\\n"+z',i=z=80)>

@aemkei
Copy link
Author

aemkei commented Dec 27, 2014

PS: When using SVG.onload it will give access to all it's properties:

<svg onload=console.log(outerHTML)>

Maybe we can use that here?

@aemkei
Copy link
Author

aemkei commented Dec 27, 2014

Using p.innerText and custom x tag makes ist 91 bytes:

<x id=p><svg onload=setInterval('z=p.innerText=Array(i=i*2%99).join(" ")+"*\\n"+z',i=z=80)>

@subzey
Copy link

subzey commented Dec 28, 2014

Looks like good ol' <body id=p onload= could save 2 bytes

@aemkei
Copy link
Author

aemkei commented Dec 28, 2014

Right! (o_#) – now 90 bytes!

@p01
Copy link

p01 commented Dec 29, 2014

Thought about that but then the snow would not fall straight down as several spans of NBSPs could fit on the width of the window. :\

If you're all cool with this effect only working properly in a narrow viewport, then I believe we can replace the \n by a \t or even U+0009 character which saves 1 to 2 extra bytes

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