Ana Tudor: Stunning visuals with Maths and...no JavaScript?
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