Skip to main content

Math

  • Lorenz Attractor with JS

    Drawing a Lorenz attractor by absolutely positioning span elements along the x and y axes, and faking the z axis by adjusting their size.

  • Lorenz Attractor with CSS

    Drawing a Lorenz attractor with CSS shadows (generated by Sass), no JavaScript involved. You really don’t want to see the resulting CSS though. It’s a huge text-shadow property with the coordinates for each of the 5000 iterations of the equations that Sass ran.

  • Animated Cuboids with CSS

    Silly use of CSS transforms and animations to have a bunch of cuboids rotate in a certain pattern. There’s no JavaScript involved, everything is done with CSS (generated by Sass).

  • Trigonometry in Sass

    · 4 minute read

    Have you ever found yourself needing trigonometric functions like sines, cosines and tangents when writing your Sass stylesheets? Ok, probably not, but the day may come, and you’ll be glad you read this. Sass provides mathematical operators like addition and multiplication, and basic language constructs like conditionals and loops, but not much more. I’ve always relied on built-in methods, like Math.sin and Math.cos in JavaScript or Ruby, for these kinds of complex calculations… Is there a way to approximate a sine or a cosine iteratively? It turns out there are plenty.