183 words ~ 1 min

A crazy twister effect in 256bytes of DHTML

Source code

p01<i id=d><script>setInterval('for(x=_="in solid #",E=Math,o=99,--O;o--;x+="<hr style=\'width:0;margin:auto;border-right:"+E.abs(q?p:P)+_+(9-q)*36+";border-left:"+E.abs(q?P:p)+_+(8+q)*36+"\'>")q=0>(p=E.cos(O+=22))*(P=E.sin(O));d.innerHTML=x',O=9)</script>

Yes, pulling this one was not easy.

How does it work

The twisting bar is rendered using <hr> elements whose border and color follow a curve. The borders are solid and sized fraction of in hence the subtitle of this intro.

This calculation q=0>(p=E.cos(O+=22))(P=E.sin(O)) hits three birds. It computes and stores the length of both visible sides of the twisting bar in p and P and check and stores which one goes left by compairing q=0>=pP.

With this three values the border-right and border-left of the <hr> element can style properly, setting the width to according to the visible sides of the bar and setting the color by casting q like this (9-q)36 or (8+q)36. Combined with the subtitle of this intro, this gives the colors #288 and #324.

Hope this answers any questions you had about this effect.


As usual you can this little production, Rubber in solid # on

Other recent experiments

There are many experiments and projects like RUBBER IN SOLID # to discover other here.

Let's talk

Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking or performance opportunity.