Ana Tudor: Stunning visuals with Maths and...no JavaScript?

Orde Saunders' avatarPublished: by Orde Saunders

Ana Tudor (@thebabydino) was speaking at Full Frontal about maths in HTML and CSS, these are my notes from her talk.

Building a torus:

  • Distrubute dots on a circle
  • Map the circle to another ring

With CSS we can use translates between transforms to create the circle and the ring.  Transform 30 degrees with :nth-child 1-12 maps a point to a circle.  transform-style property has a default value of flat but if we change it to preserve-3d we keep the 3D mapping in the browser.  By using a translate on our circles we can then distribute them round the ring of the torus.  We can't just animate the circles as they have a transform - we need to place the dots of the circle on another element that we transform.  By adding a delay to the animation we can stagger the effects.

Equaliser:

  • use a linear gradient
  • animate background along y axis.

Background position using % is relative to the element so we use absolute positioning.  Heights are set using a sin function - this gives us a static wave.  We use Sass to generate the heights, gradients - this is where the maths happens: in Sass loops and functions.

Spinning spirals:

  • Two elements rotating in different directons
  • Disks stacked on top of each other with common centre
  • Radial gradients make the spirals

To produce the spirals we layer circles on top of each other.  We need to create a cover over the end of the stack of circles.  This involves a lot of circle trigonometry which is then turned into Sass code.

Polyhedrons:

  • Can be made with simple geometric shapes
  • We can assemble and translate these to make 3D objects