Skip to content

Instantly share code, notes, and snippets.

@aemkei aemkei/Readme.md
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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

jed commented Dec 27, 2014

awesome work as always, folks!

@aemkei

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

Copy link
Owner 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

This comment has been minimized.

Copy link

subzey commented Dec 28, 2014

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

@aemkei

This comment has been minimized.

Copy link
Owner Author

aemkei commented Dec 28, 2014

Right! (o_#) – now 90 bytes!

@p01

This comment has been minimized.

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
You can’t perform that action at this time.