10 Vectors and geometry in UI design
This chapter covers
- Understanding the fundamentals of vectors and geometry in web dev
- Using geometry to manipulate the DOM
- Working with vectors in JavaScript
- Creating sophisticated geometric shapes and animations in CSS
When you examine a web page from the perspective of a frontend web developer or designer, you know that underneath that surface is a bunch of HTML tags, CSS rules, and JavaScript statements. But below all that code there's another, even more fundamental layer: the math that makes the code work. In particular, modern web browsers use concepts from vectors and geometry to position elements, rotate and scale graphics, animate UI components, and define shapes for layouts.
10.1 Mathematical foundations: points, vectors, and bounding boxes
For the rest of this chapter to make sense, and to be able to take this chapter's concepts and examples and use them to improve your own web page code, there are a few basics about vectors and geometry that you need to know. I'm going to keep things relatively simple by focusing on 2D geometry here since most web content is laid out on a flat (two-dimensional) plane (your browser window). Here are the key ideas you need for this chapter: